Simple html css block structure, can't use -headerHeight bottom-margin for content div to avoid scrollbar?
The following is my simple html/css structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>de titel</title>
<style type="text/css">
* {
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000000;
}
#wrapper {
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#header {
开发者_开发知识库 background-color: lightblue;
position: absolute;
top: 0;
width: 800px;
border: 1px solid red;
height: 60px;
}
#content {
height: 100%;
margin-top: 60px;
margin-bottom: -60px;
}
#menu {
width: 200px;
height: 100%;
border: 1px solid red;
background-color: gray;
float: left;
padding: 5px 0 0 5px;
}
#text {
background-color: orange;
height: 100%;
margin-left: 200px;
padding-top: 5px;
padding-left: 15px;
margin-right: -2px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<br><center>[ hier moet een header image worden toegevoegd ]</center>
</div>
<div id="content">
<div id="menu">
Link 1
</div>
<div id="text">
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
</div>
</div>
</div>
</body>
</html>
The question I have: "why isn't the bottom-margin: -60px; causing the content layer to decrease in 60 pixels height so that the scrollbar is not shown because of the header? how should I solve this in the cleanest possible way?"
Thanks in advance.
Well here's my take on it.
Notice the chage in doctype (I used HTML5 doctype here for simplicity's sake, as it triggers standards mode in all browsers) Be sure to ALWAYS use standards mode doctype unless you're preparing do deal with the hell of quirks mode.
<!DOCTYPE html>
<html>
<head>
<title>de titel</title>
<style type="text/css">
* {
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000000;
}
#wrapper {
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
position:relative; /* added this */
}
#header {
background-color: lightblue;
position: absolute;
top: 0;
width: 800px;
border: 1px solid red;
height: 60px;
}
#content {
/*removed these*/
/*height: 100%;
margin-top: 60px;
margin-bottom: -60px;*/
/* added these */
width:100%;
position:absolute;
top:60px;
bottom:7px;
}
#menu {
width: 200px;
height: 100%;
border: 1px solid red;
background-color: gray;
float: left;
padding: 5px 0 0 5px;
}
#text {
background-color: orange;
height: 100%;
margin-left: 200px;
padding-top: 5px;
padding-left: 15px;
margin-right: -2px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<br><center>[ hier moet een header image worden toegevoegd ]</center>
</div>
<div id="content">
<div id="menu">
Link 1
</div>
<div id="text">
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
</div>
</div>
</div>
</body>
</html>
If you want to hide the scrollbar to stop the layout 'jittering' between pages which do and don't have a scrollbar, then the safer way to do this is to make sure all pages have a scroll bar.
I've used this javascript in the past, but you'll go to hell if you use it:
<script type='text/javascript'>
window.document.write( '<style>body { height: '+(window.innerHeight+1)+'px; }</style>' );
</script>
In CSS2.1 the padding, border, and margins are all outside the height and width of an element. This is what is causing your design to be too tall, because you are using all these elements together with 100% height. This means your elements are 100% of the window height plus the padding plus the margin plus the border.
I've adjusted your HTML and CSS as follows. The basic idea is to make the two columns fill the screen, while leaving space for the header, which is a fixed size. Note: I removed the red borders. If you are going to want borders on this page you will need to use a different approach. Some workarounds I can think of would be to put the borders on non-obvious elements. For example, if you need a border on the #menu or #header you can easily do so because they are fixed-size elements. For a border just around the #text you might want to set border-bottom on the #header, border-right on the #text, border-right on the #menu, etc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>de titel</title>
<style type="text/css">
* {
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000000;
}
#wrapper {
width: 800px;
height: 100%;
margin: 0 auto;
}
#header {
background-color: lightblue;
position: relative;
height: 60px;
z-index: 1;
}
#content {
height: 100%;
margin: -60px 0 0 0;
}
#menu {
width: 200px;
height: 100%;
background-color: gray;
float: left;
}
#text {
background-color: orange;
height: 100%;
margin-left: 200px;
}
#text_inner, #menu_inner {
position: relative;
top: 65px;
margin: 0 5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<br><center>[ hier moet een header image worden toegevoegd ]</center>
</div>
<div id="content">
<div id="menu">
<div id="menu_inner">
Link 1
</div>
</div>
<div id="text">
<div id="text_inner">
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
</div>
</div>
</div>
</div>
</body>
</html>
The following code works fine in standards-compliant browsers, although it could be much better. I simply modified your code a bit, but I don't think you really understand the CSS box model. All your borders and padding added to the 100% which you declared, making it, of course, more than 100%. Please read and understand the CSS box model. Also, I recommend the use of a Strict DOCTYPE. I used XHTML, but you could have just as well used HTML 4.01. And, you used <center>, which is deprecated.
Good luck.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>de titel</title>
<style type="text/css">
* {
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000000;
}
#wrapper {
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: -60px;
}
#header {
background-color: lightblue;
position: absolute;
top: 0;
width: 800px;
height: 60px;
}
#content {
height: 100%;
}
#menu {
width: 200px;
height: 100%;
background-color: gray;
float: left;
padding: 0 0 0 5px;
}
#text {
background-color: orange;
height: 100%;
margin-left: 200px;
padding-left: 15px;
margin-right: -2px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<p>image</p>
</div>
<div id="content">
<div id="menu">
Link 1
</div>
<div id="text">
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
</div>
</div>
</div>
</body>
</html>
BTW, 100% means 100%. That's not dynamic. If you want those columns to be 100% with little content but to grow with lots of content, then your problem is only visual and you could achieve the effect you want by adding a vertically-repeating background image to the wrapper, which contains the colors of the two columns. You would then remove the bg colors from the menu and text divs. This way, both columns seem to grow with the text. See also the very old faux columns technique.
I think its because of your borders. You must add their total height to the margin-bottom value.
Edit And on a second guess i think it's because of your text div. You assign a 100% height and then add another 5px padding to the top. This can be solved by adding an inner div (e.g. the-content) inside your text div. And the style of the the-content div will have padding-top:5px; padding-left:15px;.
Are you wanting the menu div to grow with the text div? If not, this worked for me in IE, Chrome, and FF:
FYI, if you do want the menu to grow with the text div, you'll need to do something other that floating divs. Sometimes its easier just to setup a table (since your creating a table layout with divs) and go from there.
Good Luck! :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>de titel</title>
<style type="text/css">
*
{
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
background-color: #000000;
}
#wrapper
{
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#header
{
background-color: lightblue;
position: absolute;
top: 0;
width: 800px;
border: 1px solid red;
height: 60px;
}
#menuContent
{
height:100%;
width: 200px;
min-height: 100%;
border: 1px solid red;
background-color: gray;
float: left;
padding: 5px 0 0 5px;
}
#content
{
height: 99%;
}
#menu
{
padding-top:60px;
}
#textContent
{
background-color: orange;
min-height: 100%;
margin-left: 206px;
padding-top: 5px;
padding-left: 15px;
margin-right: -2px;
border: 1px solid red;
}
#text
{
padding-top: 60px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<br><center>[ hier moet een header image worden toegevoegd ]</center>
</div>
<div id="content">
<div id="menuContent">
<div id="menu">
Link 1
</div>
</div>
<div id="textContent">
<div id="text">
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Tested in all major browsers.
* {
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width:100%;
background-color: #000000;
position:absolute;
}
#wrapper {
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
position:relative;
}
#header {
background-color: lightblue;
position: absolute;
top: 0;
left:0;
right:0;
height: 60px;
border: 1px solid red;
}
#content {
position:absolute;
background-color:#999;
top:60px;
bottom:0;
left:0;
right:0;
}
#menu {
position:absolute;
top:0;
bottom:0;
left:0;
width: 200px;
border: 1px solid red;
background-color: gray;
padding: 5px 0 0 5px;
}
#text {
background-color: orange;
position:absolute;
top:0;
bottom:0;
left:200px;
right:0px;
padding-top: 5px;
padding-left: 15px;
border: 1px solid red;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>de titel</title>
<style type="text/css">
* {
color: #FFFFFF;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #000000;
}
#wrapper{
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
position:relative;
border-bottom:1px solid red;
bottom:1px;
}
#header {
border: 1px solid red;
background-color: lightblue;
position: absolute;
top: 0px;
width: 800px;
height: 60px;
z-index: 50;
}
#content{
height: 100%;
}
#menu { border-left: 1px solid red;
border-right: 1px solid red;
width: 199px;
height: 100%;
background-color: gray;
float: left;
}
#text{border-right: 1px solid red;
float: left;
background-color: orange;
height: 100%;
margin-right: -2px;
width: 600px;
}
div{
display: block;
margin: 0px;
padding: 0px;}
#menu div.Content,
#text div.Content{
border-top: 1px solid red !important;
margin-top: 60px;
padding-top: 5px;
padding-bottom: 5px;}
#menu div.Content{padding-left: 5px;}
#text div.Content{padding-left: 15px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<br><center>[ hier moet een header image worden toegevoegd ]</center>
</div>
<div id="content">
<div id="menu">
<div class = 'Content'>
Link 1<!-- <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />
Link 1 <br />-->
</div>
</div>
<div id="text">
<div class = 'Content'>
<h1>Titel</h1>
<!--<p>Dit is de tekst van je pagina.</p>
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>
<h1>Titel</h1>
<p>Dit is de tekst van je pagina.</p>-->
</div>
</div>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论