{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 做个烂人 的问题《HTML/CSS full height sidebar》','https://www.manongdao.com/q-555835.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I've found a lot of discussions and questions littered around the internet pertaining to this question, however, none of them seem to match my case and solutions are highly specific to a certain situation.
I have a header element with a height of 100px at the top of the page. I have a div#sidebar element floated left with a width of 250px, and finally a div#main element also floated left.
The height of html, body, and div#sidebar is 100%.
My goal is to get div#sidebar to extend all the way down to the bottom of the page regardless of browser size or content size. Obviously, if the content is longer than the viewable page height it should act normally and push past the end of the page, introducing scroll bars.
However, as it stands now, it seems the page height has been calculated as 100% + 100px, introducing scrollbars even though there is no content that would push div#sidebar down. So far I have found no solutions that work, or perhaps I have missed it or messed a solution up; regardless, I've been at this for well over an hour and I'm about to rip my hair out.
Is there a non-JavaScript method of getting this to work properly to stop the header's height being added to 100%?
Here is my HTML/CSS - although I included all relevant details above, this should help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Awesome Template!</title>
<link href="./stylesheet.css" rel="stylesheet" />
</head>
<body>
<header id="primary">
<h1>My Awesome Template!</h1>
</header>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="main">
<h1>Main</h1>
</div>
</body>
</html>
CSS:
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
body
{
background: #fff;
font: 14px/1.333 sans-serif;
color: #080000;
}
header#primary
{
width: 100%;
height: 100px;
background: #313131;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
background-image: -moz-linear-gradient(#4d4d4d, #313131);
background-image: -o-linear-gradient(#4d4d4d, #313131);
background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
margin: 0px 0px 0px 20px;
padding: 0px;
line-height: 100px;
color: #ffffff;
}
#sidebar
{
float: left;
width: 250px;
background: #ccc;
min-height: 100%;
}
#main
{
float: left;
}
I found that the method outlined in this article was a very simple method for solving the problem.
You need to surround your #sidebar and #main divs with another div, so your html code becomes:
and then the following css will do something close to what you want:
(with a bit of tweaking e.g. I found that the margin of the h1 in #main seemed to be ignored ... but the margin of the h1 on #sidebar was not!).
Not sure if you tried this, or if it will work for you (I'm new to coding), but try floating your sidebar left, float content right, both text-align to left, and use percentages for width.
If you have any other settings you will have to approach those differently but this might work.
You're looking for the infamous "faux-columns" technique. Here's a tutorial.
Basically, you can't do it with a simple background color, you have to use a repeating background image.
jQuery elegantly handles this with ease so I'm not sure why you wouldn't want to use js. Most developers that have coded more than a couple sites have spent considerable time searching for the magic answer, as I have have, and nothing compares to using js.
If you don't care about lower IE, use
display: tableon a parent anddisplay: table-cellon the elements. This should fix their heights together. As for the gap, usemargin-top: -100 px; padding-top: 100px;You can do that by this jquery code. Calling the main content height.