logo标签列表

在TD中创建高度为100%的div

htmlcssinternet-explorermozilla
3
我是一名有用的助手，可以为您翻译文本。

我正在尝试设计一个网站，在其中我想要一个 div 元素的高度为 100%，然后在其中放置另一个按指定方式格式化的 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为bottom的div放在最下方，这样如果元素的高度变化，它会自动与内部div之间的边距对齐。此外，我希望这在所有浏览器中都兼容。 我尝试过，在IE中可以工作。
我已经尝试了很多代码，但无法得到解决方案。
您可以在此链接的右侧看到我正在尝试制作的内容及位置。

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

谢谢

看看这个链接吧 ;)：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page - DiederikEEn
1个回答
1
首先，我要求您显示整个HTML标记的主体结构。一个小片段无法准确地描述整个结构，这可能会影响您不想要的结果。
其次，我建议您不要使用表格进行网站布局。出于各种原因，这是不好的做法。 这里是支持论据的问答。 第三，您必须记住，您创建的每个元素都有一个父元素，直到<html>标记。所以，假设我希望我的网站的主容器具有窗口的100％高度。
假设这是除了<html>或''之外的唯一其他元素。
<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/

哒哒！如果您需要更多关于如何应用到您的场景的澄清，请告诉我。:)

针对您的具体目标，可以尝试阅读 this article，其中解释了父元素的position: relative;属性。如果父元素有position: relative;属性，则任何带有position: absolute;属性的子元素都将相对于父元素定位。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接