I would like to "pin" a button to the bottom of a sidebar-div that has a height of 100%, as it should fill the whole left side of the page.
I tried to do it this way:
.sidebar {
height: 100%;
position: relative;
background-color: #CCCCCC;
}
.btn {
position: absolute;
bottom:0px;
top: auto;
}
<div class="sidebar">
<button class="btn">Button</button>
</div>
It might be because of the height in percent, as it works with a Pixel-height, but there must be some way of getting this done with percent, as the sidebar must span the entire page height.
To fix this, give your html and body a height of 100% as follows. Right now they don't have a defined height set (so they are 0px high), so your button is technically already at the bottom.
Live Example:
html, body {
height: 100%;
}
.sidebar {
height: 100%;
position: relative;
background-color: #CCCCCC;
}
.btn {
position: absolute;
bottom:0;
}
<div class="sidebar">
<button class="btn">Button</button>
</div>
The issue is your container doesn't have any actual height. You'll need to define the height on both your html and body tags too to use percent height there.
html,
body {
height: 100%;
margin: 0;
}
.sidebar {
height: 100%;
position: relative;
background-color: #CCCCCC;
}
.btn {
position: absolute;
bottom: 0px;
top: auto;
}
<div class="sidebar">
<button class="btn">Button</button>
</div>
Related
I am trying to keep an element from scrolling past left: 0 using position: sticky. This works fine in some cases, but I have noticed that if the element width increases it stops working. For example, the following works:
#header {
position: sticky;
left: 0;
width: 50%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}
<div>
<div id="header">
Where is my mind?
</div>
<div id="page">
</div>
</div>
But if I increase the witdth of header element to 100% it stops working.
#header {
position: sticky;
left: 0;
width: 100%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}
<div>
<div id="header">
Where is my mind?
</div>
<div id="page">
</div>
</div>
Why does this happen? And is there any way to use position: sticky to prevent the header element from scrolling when it's width is 100%? I prefer not to use position: fixed in this case.
I now understand what is happening. The issue is the different way the browser treats the width and height of a <div>. The default values of auto mean that the width of the <div> is 100% while the height is set by the content. If the content is wider than 100%, then on horizontal scroll the sticky element hits the end of the container <div> and, since it cannot leave the confines of the container, begins to scroll. This doesn't happen in the same situation for vertical scrolling since the container <div> is as tall as the content by default.
To prevent this happening, we have to ensure that the container <div> is as wide as its content. This can be done in most browsers (not Edge or Explorer) by including width: max-content in the container style. Alternatively, as proposed in mfluehr's answer, putting overflow: auto creates a new block formatting context that is as wide as the content. Another option is to use display: inline-block or inline-flex etc. to cause the container <div> to base its width on the content.
For example, using two of these techniques, you can create headers, sidebars and footers that stick for a page that can scroll vertically and horizontally:
body {
padding: 0;
margin: 0;
}
#app {
overflow: auto;
height: 100vh;
}
#header {
background: blue;
width: 100%;
height: 40px;
position: sticky;
top: 0;
left: 0;
z-index: 10;
color: white;
}
#sidebar {
position: sticky;
background: green;
width: 200px;
height: calc(100vh - 40px);
top: 40px;
left: 0;
color: white;
flex-grow: 0;
flex-shrink: 0;
}
#container {
display: inline-flex;
}
#content {
background: #555;
height: 200vh;
width: 200vw;
background: linear-gradient(135deg, #cc2, #a37);
flex-grow: 0;
flex-shrink: 0;
}
#footer {
background: #000;
height: 100px;
z-index: 100;
left: 0;
position: sticky;
color: white;
}
<div id="app">
<div id="header" ref="header">
Header content
</div>
<div id="container">
<div id="sidebar" ref="sidebar">
Sidebar content
</div>
<div id="content" ref="content">
Page content
</div>
</div>
<div id="footer" ref="footer">
Footer content
</div>
</div>
This is an interesting problem. I don't know why, but putting overflow: auto on the container around the <div>s seems to fix the issue.
You can add height: 100vh to the container to let the content inside overflow with scrollbars.
body {
margin: 0;
}
#container {
overflow: auto;
height: 100vh;
}
#header {
position: sticky;
left: 0;
width: 100%;
background-color: #888;
}
#page {
height: 200vh;
width: 120vw;
background: linear-gradient(135deg, #cc2, #a37);
}
<body>
<div id="container">
<div id="header">
This is the header.
</div>
<div id="page">
Page content goes here.
</div>
</div>
</body>
Anyone know how I can prevent an equal height to dynamic width div from overlapping the content below. The div needs to expand to contain content in narrow viewports.
#caeth suggested moving the div below to be inside the div above, which works: http://jsfiddle.net/534k9e2n/5/ but I'm looking for a solution that doesn't require this.
Here's the code:
<div class="holder">
<div class="shape"></div>
<div class="shape_outer">
<div class="shape_inner">Content...</div>
</div>
</div>
<div class="shape_below"></div>
...
.holder {
display: inline-block;
position: relative;
width: 50%;
}
.shape {
margin-top: 100%;
}
.shape_outer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.shape_inner {
background: #ddd;
min-height: 100%;
width: 100%;
}
.shape_below {
background: #111;
width: 200px;
height: 200px;
}
and a JSFiddle: http://jsfiddle.net/534k9e2n/4/
Thanks B.
Try this:
.shape {
margin:20px;
}
What you are doing is create a hidden field around the div.I think you can delete the shape-outer.
I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).
Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Edit:
Basic CSS code I am trying is:
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
Simple css code :
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
Example :
http://jsfiddle.net/rp4ss12b/
Your top bar and side bar need to be position: fixed;. Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).
You could do it like this:
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Check this snippet, You can do this by using pure css as shown below or you can use display:inline-block or float elements but you need to set the width of right div using javascript.
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}
<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.
Ok so I've got a header and a footer with absolute positioning and heights of 144px. The content div in the middle area needs to be the full height of the area in between.
Simplified:
<style>
.marginals{
position: absolute;
height: 144px;
width: 100%;
left: 0;
}
#header{ top: 0px; }
#footer{ bottom: 0px; }
</style>
<div id="header" class="marginals"></div>
<div id="content"> Content </div>
<div id="footer" class="marginals"></div>
So basically I want a div that is 100% - 288px. At first I thought I could just make a 100% x 100% div with 144 padding on top and bottom and then stuff the content div in there at 100% but my thinking has gone stray somewhere.
Here's an example I made using 20% height for 'bread layers'. (Which I can't do on this project) Used 60% height for the scrolling 'meaty layer' and put it at top: 20%;
What you have won't work, tables and absolute positioning don't go well together, and height on table rows and cells is not handled consistently across browser anyway so I think you'd find it hard to get the top/bottom rows to stay a fixed height while still asking the middle row to scroll
however I think you were right with your original posting and using absolute positioning, you don't need percentages though, you can use the top and bottom co-ordinates tohether, so you can tell the middle div to start at 144px from top and finish 144px from bottom..
e.g.
HTML:
<div class="header">Some header content</div>
<div class="wrap">
Bulk content<br>bulk content<br>bulk content<br>bulk content<br>
Bulk content<br>bulk content<br>bulk content<br>bulk content
</div>
<div class="footer">Some footer content</div>
CSS:
html, body {margin: 0; padding: 0; height: 100%; overflow: hidden;}
.wrap {
position: absolute;
left: 0;
top: 144px; /* = height of header including any borders or padding */
bottom: 144px; /* = height of footer including any borders or padding */
width: 100%;
background: #fff;
overflow: auto;
}
.header, .footer {
position: absolute;
width: 100%;
left: 0;
height: 140px;
background: #f00;
}
.header {
top: 0;
border-bottom: 4px solid #000;
}
.footer {
bottom: 0;
border-top: 4px solid #000;
}
The whole thing is based on the html, body elements having the height of 100% set
Example: here
Looks like you're trying to create a 3 liquid row-layout. Why not try something like this:
Fiddle: http://jsfiddle.net/jCjsD/2/
HTML
<body>
<div id="body_container">
<div id="header">Some header content</div>
<div id="content"><!-- Bulk content here !--></div>
</div>
<div id="footer">Footer</div>
</body>
CSS
#header, #content, #footer {
float: left;
width: 100%;
}
#header {
border-bottom: 1px solid #888;
background: yellow;
}
#footer {
border-top: 1px solid #888;
background: yellow;
}
#content {
clear: both;
padding-bottom: 50px;
}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#body_container {
min-height: 100%;
}