CSS column sizing
I have a page which can resize depending on the content. What I need is a way for the side bars to increase / decrease along with the body, but never to be less than 100% of the visible body.
Initially the page looks fine, but when I increase the content, I can see white space underneath the left and right sides, when there should not be any.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999开发者_开发百科/xhtml">
<head>
<title></title>
<style type="text/css">
.container
{
background-color: Gray;
height: 100%;
width: 100%;
position: absolute;
clear: both;
}
.content
{
background-color: white;
width: 80%;
margin: 0 auto;
height: 100%;
min-height: 100%;
}
</style>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
function MakeBig() {
var html = "";
for (var i = 0; i < 500; i++) {
html += "this is some random filler text<br/>";
}
$("#textHolder").html(html);
}
function MakeSmall() {
var html = "";
for (var i = 0; i < 5; i++) {
html += "this is some random filler text<br/>";
}
$("#textHolder").html(html);
}
</script>
</head>
<body>
<div id="container" class="container">
<div id="content" class="content">
This is some text in the content
<button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/>
<button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button>
<div id="textHolder"></div>
</div>
</div>
</body>
</html>
Here is a jQuery way. But, not a bullet proof one. Hope you would get some idea...
<style type="text/css">
html { height: 100% }
</style>
<script type="text/javascript">
$(document).ready(function() {
if(!($(window).height() < $(document).height())) {
$("#wrapper").css("height", "100%");
$("#sidebar").css("height", "100%");
}
$("#content").resize(function() {
if($("#content").height() > $(window).height())
$("#sidebar").height($("#content").height());
});
});
</script>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
I believe what you're searching for is position: fixed.
It basically disallows scrolling to remove an element from the screen. That is, you can scroll as much as you want, but the fixed element won't move.
Here's that in action with your example page:
// Sorry for the ".getElementById"'s thing, I didn't have jQuery
function MakeBig() {
var html = "";
for (var i = 0; i < 500; i++) {
html += "this is some random filler text<br/>";
}
document.getElementById("textHolder").innerHTML = html;
}
function MakeSmall() {
var html = "";
for (var i = 0; i < 5; i++) {
html += "this is some random filler text<br/>";
}
document.getElementById("textHolder").innerHTML = html;
}body {
/* <body> has a default margin of 8px, let's remove that */
margin: 0;
}
.container {
height: 100%;
width: 100%;
position: absolute;
clear: both;
}
.content {
background-color: white;
width: 80%;
margin: 0 auto;
height: 100%;
min-height: 100%;
}
/* Add 2 pseudo-elements inside .container */
.container::before,
.container::after {
/* no text, only gray background */
content: "";
background-color: gray;
/* fixed positioning -> won't leave the screen after scroll */
position: fixed;
/* 10% width -> main content has 80% width, that leaves 10% for each side */
width: 10%;
/* 100% height, or 0px from top to 0px from bottom */
top: 0;
bottom: 0;
}
.container::before { left: 0; } /* align to left */
.container::after { right: 0; } /* align to right */<div id="container" class="container">
<div id="content" class="content">
This is some text in the content
<button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/>
<button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button>
<div id="textHolder"></div>
</div>
</div>As you may have noticed, I didn't change your HTML and barely touched the JavaScript (only to replace the jQuery selections with vanilla JavaScript).
I added comments on the CSS to explain as best as I could what was the purpose of everything. Please don't hesitate to ask for clarifications!
I hope this is still relevant to you, even after 7 years! Cheers!
加载中,请稍侯......
精彩评论