I have a flex container with two children of different height.
The left item is shorter which I'm trying to make stick to the bottom while scrolling until the full container has been scrolled so they both align. Can't seem to get this to work. No parent overflows affecting this.
The desired behaviour is for the viewer(left) element to align at the top, scroll until it reaches the bottom, stick there until the full container (and side rail) has scrolled
Sandbox Here
.wrapper {
padding: 2rem;
background: lightgrey;
}
.container {
margin-inline: max(0px, ((100% - 1440px) / 2));
display: flex;
height: 2220px;
gap: 1rem;
> * {
border: 1px solid;
}
}
.viewer {
height: 1400px;
flex-grow: 3;
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: white;
}
.side-rail {
height: 2190px;
flex-grow: 1;
background: white;
}
html,
body {
margin: 0;
}
<div class="wrapper">
<div class="container">
<div class="viewer">Viewer</div>
<div class="side-rail">Side rail</div>
</div>
</div>
Does making the the 'viewer' div
align-self: flex-end;
instead of flex-start do what you require ?
Seems like you have to make both the .viewer and the .side-rail of same height and overflow: auto the content within the side-rail
Related
In the following HTML, I want to set the height of left and right 100% of the parent element. In addition, the left div has fixed width. The right should use all of the remaining width.
I think because of using display: flex; in the parents div, the width of the left div doesn't stay constant. How can I set fixed width for it and allocate all of the remaining space to the right.
Edit: the calc(100-52px) is the height of the parent. The question is only about setting fixed width of 100px to the left so that it doesn't change on resizing the window.
Here's what I'm trying:
body {
padding: 0;
margin: 0;
}
.parent {
background: red;
display: flex;
height: calc(100vh - 52px);
}
.left {
width: 100px;
background: yellow;
}
.right {
background: orange;
width: 100%;
}
<div class="parent">
<div class="left">the width should be fixed, not flexible</div>
<div class="right">width should be all of the remaining</div>
</div>
parent { display: -webkit-box;display:-webkit-flex;display: -ms-flexbox;display:flex;flex-wrap: wrap; }
.parent > [class*='col-'] { display: flex; flex-direction: column; }
You can use width: calc(100% - 100px) or flex: 1 for the right div.
Percentage values are calculated from the parent element, therefore you need to extract static values from 100% to get the remaining area.
But as you are already using a flex container here, you can just set flex: 1, which is the shorthand for flex-grow: 1, that will allow your container to take all the extra space in the parent container, since no other items are available.
Add a flex declaration to the .left selector:
flex: 0 0 100px;
flex syntax:
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
So this declaration is stating: "don't grow, don't shrink, define the initial size as 100px"
Read more: flex (MDN)
If right is to stand 52px away from the far right, then a margin will do . Please clarify your question.
body {
padding: 0;
margin: 0;
}
.parent {
background: red;
display: flex;
height: calc(100vh - 52px);
}
.left {
width: 100px;
background: yellow;
}
.right {
flex-grow: 1;
background: orange;
margin-right: 52px;
}
<div class="parent">
<div class="left">the width should be fixed, not flexible</div>
<div class="right">width should be all of the remaining</div>
</div>
Set flex: 0 0 100px; on your .left div (you can remove width: 100px) if you want it to be a constant 100px - so no growing or shrinking.
body {
padding: 0;
margin: 0;
}
.parent {
background: red;
display: flex;
height: calc(100vh - 52px);
}
.left {
flex: 0 0 100px;
background: yellow;
}
.right {
background: orange;
width: 100%;
}
<div class="parent">
<div class="left">the width should be fixed, not flexible</div>
<div class="right">width should be all of the remaining</div>
</div>
see if this helps you, comment if you need any changes
stackblits link for 1 fixed width, 1 relative column
I am building a page with two columns side-by-side that should fill the entire page. Both columns should both be 50% of the available width with no margin or padding on either side and take up 100% of the available height depending on the resolution.
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
body>* {
flex-shrink: 0;
}
.login-column {
float: left;
width: 50%;
background-color: #F4F6F9;
margin: 0;
}
.news-column {
float: left;
width: 50%;
background-color: #75BFF0;
/* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
/* Standard syntax (must be last) */
margin: 0;
flex-grow: 1;
}
<div class="row">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
Currently, the divs have no padding or margin on the top, left, and right; however, the background color only extends to the end of the text. I want the background to extend to the bottom of the page, without a scrollbar.
On a side note, I am using divs. Is this still recommended or should I be using the new, HTML5 things such as article, aside, .etc?
In order to get a DIV to fill the page in height you need to use this :
CSS
div {
height: 100vh;}
Also everything is explained in this post :
How to make a div 100% height of the browser window
remove floats, you can add height to your columns 100vh but in your head section of the page should be <meta name="viewport" content="width=device-width, initial-scale=1">
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
body>* {
flex-shrink: 0;
}
.row {
display: flex;
}
.login-column {
flex: 0 0 50%;
background-color: #F4F6F9;
margin: 0;
height: 100vh;
}
.news-column {
flex: 0 0 50%;
background-color: #75BFF0;
/* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
/* Standard syntax (must be last) */
margin: 0;
height: 100vh;
}
<div class="row">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
You can simply include height in div classes.
.login-column {height: 100%;}
.login-column {height: 100%;}
You shouldn't use floats and position: absolute, unless you absolutely know what you're doing. I suggest using a flex container to do what you want, and use max-height to make the two columns (sections) fill out the whole screen height. If you just use height: 100vh, the columns will stay at that height blocking things from overflowing.
Also note how I use class syntax to reuse CSS code.
body {
margin: 0;
padding: 0;
}
.flex-container {
width: 100%;
display: flex;
}
section {
min-height: 100vh;
flex-basis: 50%;
box-sizing: border-box; /* To let padding be part of the width */
padding: 1rem;
}
section.left {
background-color: #F4F6F9;
}
section.right {
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
}
<body>
<div class="flex-container">
<section class="left column">
Ladidaa
</section>
<section class="right column">
Tralalaa
</section>
</div>
</body>
Did you try to create a content div that contains the columns, i would try something like this.
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
.columns-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.login-column {
display: flex
background-color: #F4F6F9;
margin: 0;
width: 50%;
}
.news-column {
display:flex;
background-color: blue;
margin: 0;
width: 50%;
height: 100%;
}
<div class="columns-container ">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
Regarding use of div, article and aside, actually they are used for to code semantic Html to get the best result for Search Engine Optimization and other bots related activity also good for other developers to understand code flow. Not answering your primary question as it already answered many times, let me know if you are not satisfied with other answers :)
Note: Using div is all fine in your case, don’t worry.
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I'm trying to center an element in the middle of the page. I can center it just fine, but if I resize the page vertically until the view height is smaller than the centered element, the element goes offscreen vertically without a scrollbar. You can see a demonstration of the issue here:
http://codepen.io/mse/pen/BWayXV
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.outer {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.inner {
display: inline-block;
width: 400px;
height: 800px;
background: grey;
}
<div class="outer">
<div class="inner"></div>
</div>
I should mention that I have tried a couple of other methods of vertical centering, including flexbox, and I'm still running into the same issue. Is there a way to solve this problem with this method of vertical centering, or is there at least a vertical centering method that does not have this issue?
Try this
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.outer {
display:flex;
justify-content:center;
align-items:center;
}
.inner {
background: #ccc;
width: 400px;
height: 600px
}
<div class="outer">
<div class="inner"> I'm a block-level element centered vertically within my parent.</div>
</div>
More info: https://css-tricks.com/centering-css-complete-guide/
CSS VH center generator: http://howtocenterincss.com/
This should work
* {
padding: 0;
margin: 0;
}
html, body {
height: 100vh;
}
.outer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 400px;
height: 800px;
background: grey;
}
<div class="outer">
<div class="inner"></div>
</div>
You can try to limit the size of your inner element. If you define size by a fixed px amount it will start scrolling as soon as the screen becomes smaller than that px amount. If you are ok with changing the height of the inner element you could use vh or you can implement #media queries to decrease the size on smaller screens. Here#s an example:
.inner { height: 100vh; /* 100 view height percentage*/}
Note: The viewport-percentage lengths are relative to the size of the initial containing block and affected by the presence of scrollbars on the viewport.
I have a layout with left and right canvas sidebars, enclosing the Main content area in the middle.
The sidebars and main content are flex items, positioned in a flex layout left to right.
The sidebars contain menus and meta links.
My question is: when scrolling the content area, is it possible to leave the sidebars in fixed position, such that they stay in top position and do not scroll down?
JS Fiddle: http://jsfiddle.net/Windwalker/gfozfpa6/2/
HTML:
<div class="flexcontainer">
<div class="flexitem" id="canvas-left">
<p>This content should not scroll</p>
</div>
<div class="flexitem" id="content">
<div>
<p>Scrolling Content</p>
</div>
</div>
<div class="flexitem" id="canvas-right">
<p>This content should not scroll</p>
</div>
</div>
CSS:
.flexcontainer {
display: flex;
flex-direction: row;
min-height: 100%;
align-items: stretch;
}
.flexitem {
display: flex;
}
#canvas-left {
background: yellow;
order: -1;
flex: 0 0 57px;
}
#content {
background: green;
order: 1;
padding: 1rem;
}
#content div {
display: block;
}
#canvas-right{
background: blue;
order: 2;
flex: 0 0 57px;
}
Please look at the similar question with provided solution: How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar.
According to your code you can also wrap your inner content in "position: fixed" wrapper:
<div class="flexitem" id="canvas-left">
<div class="fixed">
<p>This content should not scroll</p>
</div>
</div>
And add proper styling in CSS:
.fixed {
position: fixed;
width: 57px; /* according to #canvas-left */
}
Here is an example of your code with fixed left sidebar: http://jsfiddle.net/8hm3849m/. Note that this trick won't provide you proper flexible grid for sidebars, width of the wrapper should be fixed (or set dynamically via JavaScript).
The question is old, but I solved a similar issue using
position: sticky;
top: 0;
for the left and right items.
Also I removed the
display: flex
css for the flex items, I don't think that's necessary.
https://jsfiddle.net/8mpxev0u/
i dont know how do it with flex, but here is a easyer/alternate css remove all that flex... and try to never add padding to a outer div, its easyer in inner items, then you dont need to calculate if there are to many divs
.flexcontainer {
display: block;
min-height: 100%;
align-items: stretch;
}
.flexitem {
display: flex;
}
#canvas-left {
background: yellow;
order: -1;
left: 0px;
width: 20%;
position: fixed;
}
#content {
position: absolute;
background: green;
order: 1;
width: 60%;
left: 20%;
}
#content p {
display: block;
padding: 1rem;
}
#canvas-right{
background: blue;
order: 2;
right: 0px;
width: 20%;
position: fixed;
}