Fatal编程技术网
  • css/
  • CSS-三个div相邻，高度为100%

CSS-三个div相邻，高度为100%

css

CSS-三个div相邻，高度为100%,css,Css,我正在处理一个网站的布局，我正在尝试在下图中为布局设置css规则： 我希望左、右div扩展到content div的高度，我不太熟悉clear属性以及如何使用它。以下是我迄今为止所做的工作： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi

我正在处理一个网站的布局，我正在尝试在下图中为布局设置css规则：

我希望左、右div扩展到content div的高度，我不太熟悉clear属性以及如何使用它。以下是我迄今为止所做的工作：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Untitled Document</title>
<style type="text/css">
<!--

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#header {
    background: url(images/header.png) no-repeat;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear: both;
    padding: 15px;
    width: 1013px;
    height: 46px;
}
#wrapper {
    clear: both;
    width: 1043px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    height: 100%;
    min-height: 100%;
}
#content {
    background: #F00 url(images/fondo%20light.jpg) repeat;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    color: #333;
    z-index: 1;
    float: left;
    width: 985px;
    clear: none;
    padding: 0px;
    height: 150px;
}
#lines-left {
    background: url(images/lines-left.png) no-repeat;
    float: left;
    width: 17px;
    height: 100%;
    margin-left: 13px;
}
#lines-right {
    background: url(images/lines-right.png) no-repeat;
    float: right;
    width: 17px;
    height: 100%;
    padding: 0px;
    margin-top: 0px;
    margin-right: 11px;
    margin-bottom: 0px;
    margin-left: 0px;
}
body {
    background: url(images/dark-pattern.jpg);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFF;
    margin: 0px;
}
#footer {
    background: url(images/footer.png) no-repeat;
    height: 140px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear: both;
    padding: 15px;
    width: 1013px;
}
-->
</style>
</head>

<body>
<div id="wrapper">

<div id="header">Content for  id "header" Goes Here</div>
<div id="lines-left">&nbsp;</div>
<div id="content">Content for  id "content" Goes Here</div>
<div id="lines-right">&nbsp;</div>

<div id="footer">Content for  id "footer" Goes Here</div>

</div>
</body>
</html>


无标题文件
id“header”的内容位于此处
id“Content”的内容在这里
id“footer”的内容位于此处
您可能想看看如何使用内联块：

看看这个站点-

这是您的答案

。。。它解释了如何获得相等的高度。针对您的两栏问题，请查看演示

与您一起冒险

由于您需要100%的高度—这在大多数情况下都是一种痛苦—并且您的所有列和行似乎都具有固定的宽度/高度，因此通过固定的位置，这变得非常容易，它允许您指定每个容器的每个边缘与浏览器页面的侧面之间的距离。

这是一大堆代码，您可能会从了解jsfiddle.net中受益。谢谢，我已经看过好几次了，但是从来没有看到过这个url。下次我会用的！