3

我正在尝试设计一个网站，我希望在一个元素内有一个 100% 高度的 div，然后在其中有一些其他 div，以指定的方式格式化。

我正在尝试的代码是这个

css

#main1{
  margin: 0 auto;
  width:300px;
  background: red;
  position:absolute;

}

#content1{
  top:0;
  width: 300px;
  height: 250px;
  background: gray;
}

#content2{
  width: 300px;
  height: 250px;
  background: yellow;
}

#content3{
  width: 300px;
  height: 250px;
  background: brown;
}

#bottom{
  width: 300px;
  height: 75px;
  position:absolute;
  bottom:0;
  background: blue;
}

我是这样设计的

<td width="300" valign="top" style="position:relative; height:100%">


        <div id="main1"> 
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
        </div>


</td>

我希望 id 为 content1 的 div 位于 td 的最顶部，底部为 id 底部，这样如果元素的高度发生变化，它会自动在顶部和底部对齐，内部 div 之间有边距，我也想要这个兼容所有浏览器。我试过了，它在 IE 中工作。

我尝试了很多代码但无法获得解决方案

您可以在右侧的此链接中看到我正在尝试制作的位置和内容

http://www.spoiledagent.com/about_hanu.html

谢谢

4

1 回答 1

1

首先，我要求您显示正文结构的整个 HTML 标记。一个小片段并不能准确描述可能会影响您不想要的结果的整个结构。

其次，我建议您不要使用表格进行站点布局。由于各种原因，这是不好的做法。 这是一个带有支持论据的问答。

第三，你必须记住，你制作的每个元素都有一个父元素，直到<html>标签。所以，假设我希望我网站的主容器到窗口的高度为 100%。

假设这是除<html>or '' 之外的唯一其他元素。

<div id="container">
    <h1>Why you no touch the bottom?</h1>
</div>

使用这个 CSS：

#container {
    background: #ccc;
    height: 100%;
}

http://jsfiddle.net/BvNY4/

在这个小提琴中，我们可以看到它没有达到 100% 的高度。为什么？嗯......从技术上讲，它是......但它的父母不是。所以像一个勇敢的 Tee-Ball 教练一样，我们需要告诉这个元素的父母该怎么做：

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

http://jsfiddle.net/B6RH7/1/

达达！如果您需要进一步说明这如何适用于您的场景，请告诉我。:)

更针对您的特定目标，尝试这篇文章解释position: relative;父元素。如果父元素具有属性position: relative;，则任何具有属性的子元素position: absolute;都将自己定位到父元素。

于 2013-10-02T16:07:10.303 回答