简单的html css块结构，不能使用-headerHeight底边距内容div来避免滚动条？ [英] Simple html css block structure, can't use -headerHeight bottom-margin for content div to avoid scrollbar?
问题描述
以下是我简单的html / css结构：
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>
我有这个问题：为什么不是底边距：-60px;图层减少60像素高度，以便滚动条不显示，因为标题？我该如何解决这个在最干净的可能方式？
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?"
提前感谢。
推荐答案
以下代码在符合标准的浏览器中正常工作，但可能会更好。我只是简单地修改你的代码，但我不认为你真的了解CSS框模型。您的所有边框和内边距都已添加到您声明的100％，当然，更多超过100％。请阅读并了解 CSS框模型。此外，我建议使用严格 DOCTYPE 。我使用XHTML，但你可以使用HTML 4.01。而且，您使用了< center> ，已弃用。
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.
祝你好运。
<!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％表示100％。这不是动态的。如果你想要这些列是100％与少量内容，但增长与大量的内容，那么你的问题只是视觉，你可以通过添加一个垂直重复的背景图像到包装器，的两列。然后，您将从菜单和文本div中删除bg颜色。这样，两个列似乎都随文本增长。另请参阅旧的虚假专栏技术。
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.
这篇关于简单的html css块结构，不能使用-headerHeight底边距内容div来避免滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
