This question already has answers here:
Force sidebar height 100% using CSS (with a sticky bottom image)?
(17 answers)
Closed 8 years ago.
I have a issue with the left sidebar.
I would like to make the left sidebar 100% height of the browser always no matter what content is there in right hand panel.
<div class="container">
<div class="leftwrapper">Some text</div>
<div class="rightwrapper">Some text for right</div>
</div>
Fiddle -- http://jsfiddle.net/squidraj/32uppbhy/
Percentage heights are relative, you want the containing element .container to stretch the full height of the viewport, so it needs a height of 100%, but 100% of what? So you also need to set it on your html and body elements. Then simply give your absolutely positioned sidebar bottom:0; to stretch it the full height.
Simply change your CSS thus:
html, body { /* ensure the available document space is the full height of the viewport */
height:100%;
padding:0;
margin:0;
}
.container {
overflow: hidden;
position: relative;
height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
background-color: #0b7582;
bottom: 0;
float: left;
position: absolute;
text-align: center;
top: 0;
width: 8%;
bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
float: left;
margin-left: 8%;
width: 92%;
}
Add the following rule to the top of your CSS:
html, body, .container, .leftwrapper {height:100%;}
Few elements derive their height from body and html tags as their parent. What you can do is simply create a new css rule for body and html tag with a height property of 100% and then another rule for your sidebar height to be 100%. Hope it works :)
CSS rules:
html,body{height:100%;}
.sidebar{height:100%;}
Related
Problem is trivial (I am sure there must be plenty of solutions, but can't find proper one myself (honestly))
I need simple header->content->footer page, like this
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
Where header footer is sticky to botom (not fixed position, if there is no content it's on bottom, if there is, It must move depending on content block height.
What I've tried
header and footer are absolute with top and bottom properties, content have padding from top and bottom same as header and footer height but it doesn't work as I want to.
Jsfiddle example:
https://jsfiddle.net/xwjhn7ej/
You are so close ... just need to change the value from height , what you need is to set the min-height :
.container {
min-height: 100%;
Updated Fiddle
Bonus:
To keep the content all visible you can use padding on the container = to the height of your footer and header:
.container {
min-height: 100%;
background:red;
width:1280px;
margin:0 auto;
position: relative;
/*Use box-sizing to include the values of the padding on the 100% min-height*/
box-sizing:border-box;
/*Padding for bottom and top = to the height of your elements footer-header*/
padding: 135px 0;
}
2nd Demo Fiddle
.container {
min-height: 100%;
}
.content {
padding-top: 135px; // height of the header
padding-bottom: 135px; // height of the footer
}
JSFiddle
Based on your fiddle you can could try the following:
.container {
/* height: 100%; - remove this*/
min-height: 100vh;
...
}
Then add appropriate padding to the top and bottom of the content depending on the height of your header and footer.
i want do fixed page height without scrolling, header fixed on top, and fill center to the remainder of the page. Center area will be have own scrolling bar when content overflow.
I set height 100% for central div, but this height ≠ height free space between top and bottom blocks.
What can i do? Many thanks!
Look code on jsfiddle
I have made a js fiddle which i have created with the points that i have understood from your problem.
I am using jquery $( window ).height() for getting browser viewport height.
By subtracting the height of header and footer (50px + 50px =100px) from browser viewport height i will get the height of extra space.
This height will be equal to the content height.
check the fiddle
http://jsfiddle.net/bnx4uuse/1/
html,body {height:100%; }
* { padding: 0; margin: 0; }
body { border:1px solid blue; }
#head {background-color:#FC6; height:50px;position:fixed;top:0px;width:100%;}
#center {background-color:#3CC; height:100%;margin:49px 0px; }
#foot {background-color:#9C0; height:50px;position:fixed;bottom:0px;width:100%;}
fiddle: http://jsfiddle.net/9xrz9mbf/4/
Add a wrapper div around your center div.
Set it to full screen and pad:
height: 100%;
width: 100%;
padding-top: 150px; /* size of your header */
padding-bottom: 100px; /* size of your footer */
On your center div you set overflow:
overflow: auto
The overflow property hides the extra content and adds a scrollbar to your div.
You header will have:
height: 150px; /* your desired size */
position: fixed; /* or absolute */
top: 0px;
Your footer will have:
height: 100px; /* your desired size */
position: fixed; /* or absolute */
bottom: 0px;
Then you have a "full-screen" app (full-window in that case)
This question already has answers here:
CSS Div width percentage and padding without breaking layout
(3 answers)
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
New to this, so apologies if I missed a crucial lesson in CSS...
I'm trying to do a simple exercise in CSS... a div within a div, both sized with percentages so they respond to a changing window size. Here's my code:
<head>
<title>Percentage Test</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#outer {
height: 100%;
width: 100%;
background-color: yellow;
}
#inner {
height: 90%;
width: 90%;
/* margin: 5%; */
background-color: blue;
}
</style>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
Everything does just what I thought; the outer div takes up the whole screen and the inner div takes up 90% of the outer div. If I add to this (i.e. add another inner div, change the percentages) everything does what I would expect. If I add a surrounding margin to the inner div (in this case, 5% but commented out), I would expect the inner div to be centered (top/bottom, left/right) within the outer div. It works for the sides and the bottom but not the top. Instead, the outer div is pushed away from the body at the top (I assume 5% but I'm not sure). Any thoughts on why this happens?
Box-sizing will include padding and borders within the widths size.
DEMO
#outer {
height: 100%;
width: 100%;
padding:5px;
background-color: yellow;
box-sizing:border-box;
}
#inner {
height: 100%;
width: 100%;
/* margin: 5%; */
background-color: blue;
box-sizing:border-box;
}
TIPS
Top margins often fail in some browsers.
Use margin-bottom or padding-top to create the vertical space.
Height 100% will not stretch to fit the outer most container without additional hacking.
The div will only be the size of it's content.
This is the way the CSS box model works by default. The dimensions of an object is the set width/height plus any borders/margin/padding.
To have any borders/margins/padding included in the specified width, use the box-sizing:border-box; setting on that element in your CSS.
I actually don't know how to name my question. But I will explain what I need to do.
HTML is simple as this:
<div id="left_div"></div>
<div id="right_div"></div>
I need left_div to be on the left, to have 100% width, but with fixed right margin 320px. right_div has fixed width 300px and must be alongside left_div.
I know I can do this very easily, when I would do this:
<div id="right_div" style="float:right;width:300px"></div>
<div id="left_div" style="margin-right:320px;"></div>
But the problem is that I need HTML to be as I mentioned before. The order of DIVs matter. If someone wonders why, it's because I am working on responsive website, where I need, when the viewport is too narrow, the right_div to be below left_div. And that I can't do with simple solution I have put above.
I hope my question makes sense and I am thankful for any answers or helpful hints.
Oh, and I forgot to mention I need this to be pure HTML+CSS, no JS. And I don't need to support IE7 and below.
UPDATE:
left_div must be width:auto and right margin must be fixed (e.g. 300px).
If you want your layout to be responsive you should use a CSS framework like Columnal, 1140, or more in this list.
Most of these frameworks supports the grid system, which is the best way to structure your layout and you don't have to worry about floats and pixels anymore.
I think that what do you want is almost impossible with just pure HTML + CSS.
What may work for you is something like this one I did: http://jsfiddle.net/fmZAm/
HTML:
<div class="main">
<div class="left"></div>
<div class="right">
<div class="fixed_content"></div>
</div>
</div>
CSS:
div.main
{
min-height: 500px; /* force some height */
min-width: 300px; /* min width to show content */
text-align: center; /* center content when in vertical responsive mode */
font-size: 0px; /* remove blank space from 'inline-block' display */
}
div.main > div /* left and right divs */
{
width: 100%; /* force both to have as max width as possible */
min-height: inherit; /* same min height as parent */
min-width: inherit; /* same min width as parent to show content */
display: inline-block;
}
div.left
{
max-width: 58%; /* 100% width from max of 58% parent width */
background-color: lightgreen;
}
div.right
{
max-width: 42%; /* 100% width from max of 42% parent width */
text-align: right; /* put child 'inline-block' divs to the right */
background-color: dodgerblue;
}
div.right > div.fixed_content
{
width: 300px; /* set the 300px right div you want */
min-height: inherit; /* same min height as parent */
background: orange;
display: inline-block;
}
As both divs (left and right) will have % widths, both will resize based on the current max width, but you'll have your fixed width div inside of the right div. So, when your right div resize to 300px width (the fixed with of its child div) it will go below the left div.
Hope it helps!
I had the same issue, I solved it using position:absolute.
HTML
<div class="container">
<div id="left_div"></div>
<div id="right_div"></div>
</div>
CSS
.container {
position:relative;
}
#left_div {
float: left;
width: auto;
margin-right: 320px;
}
#right_div {
position:absolute;
top:0;
right:0;
width: 300px;
}
I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}