Question

我正在尝试设计一个网站，我希望在一个元素内部有一个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位于极顶，而id底部位于td的极限底部，因此如果元素的高度发生变化，则会自动在顶部和底部对齐内部div之间的边距，我希望这是所有浏览器兼容的。我试过，它在IE中工作。

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

你可以在右边的链接中看到我想要做的地方和内容

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

由于

Answer 1

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

其次，我建议您不要使用表格进行网站布局。出于各种原因，这是不好的做法。 Here's a Q/A with supporting arguments.

第三，您必须记住，您制作的每个元素都有父级，直到<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;的任何子元素都将自己定位到父元素。

在TD内部创建100％高度的div

1 个答案: