【发布时间】：2011-10-03 22:53:13
【问题描述】：
我有一个两列布局。我有一个#mainContainer div，其中包含以下所有内容（#footer 除外）：
- 在顶部：一个标题 div (#intro)（包含一个小的渐变图像）， 和一个#hero div（包含图片）
- 要包含两列：#content div
- 在左侧的#content div 内：一个#mainContent div
- 在右侧的#content div 内：一个#sideBar div
- 在底部（#mainContainer div 之外）：底部有一个#footer div （包括像标题 div 这样的渐变图像）
很简单，对吧？但是我无法让#mainContainer div 位于浏览器的顶部（没有空格或所有浏览器在顶部都有 6-8px 的默认边距/填充）并使#footer div 跨越整个底部浏览器窗口的（不在任何 Div 中）。 （忽略页脚中的内联样式）。有人可以帮帮我吗？
更新：添加 HTML
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}
#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/
}
#intro {
/*top:0;*/
margin: 0;
text-align:left;
}
#hero {
width:960px;
padding-left:10px;
padding-right:10px
}
#content {
width:960px;
padding-left:10px;
padding-right:10px;
}
#mainContent_left {
float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}
#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}
#footer {
width:960px;
clear:both;
background:#cc9;
}
HTML：
<title>Descriptions </title>
<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="intro"><h2>introducing</h2></div>
<div id="Hero">
<ul>
<li class="name"></li>
<li class="textJoin">is a member of </li>
<li class="name"></li>
</ul>
</div>
<div id="content">
<div id="mainContent">
<h3>First Topic title</h3>
<p>floated left image and text</p>
<p>Some content</p>
<p>Some content</p>
<h3>Second Topic title</h3>
<p>Some content</p>
<p>Image here</p>
<h3>Third Topic title</h3>
<p>(floated left image here) Some text</p>
<h3>Fourth Topic title</h3>
<p>(floated left image here) Some text</p>>
<h3>Fifth Topic title</h3>
<p>(floated left image here) Some text</p>
<p>Image here</p>
<p>(link to FAQ page)</p>
</div>
<div id="sideBar">sidebar content
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer_warranty">footer content
<div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
<div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
<p style="clear:both;" />
</div>
</div>
<p style="clear:both;" />
</div>
</body>
</html>
【问题讨论】：
-
你可以创建一个简单的演示@jsfiddle.net 吗？这将有助于更好地了解您到底想要实现什么。
-
还剩多少间距？一些浏览器会为 body 标签添加边框。
-
Andrej，我不知道如何使用 jsfiddle.net。我添加了 HTML。
-
你的问题非常广泛，一次涵盖了太多的小问题。使用 jsFiddle 非常简单。我将您的代码剪切并粘贴到此处...只需查看它以了解它是如何完成的。 http://jsfiddle.net/tjfJF/.