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

我试图设计一个网站，我想要一个元素内100％高度的div，然后是其中的一些其他div，以特定方式格式化。在TD内部创建高度为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内容1股利的最顶端，并与ID底部在td内的极端底部，所以如果元素的高度发生变化，它会自动在顶部和底部对齐，并在内部div之间留有边距，同样我也希望它全部是br欠款兼容。我试过了，它在IE中工作。

我已经尝试了这么多的代码，但无法得到解决

您可以在这个环节在右侧看到哪里，什么我试图让

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

感谢

来源

2013-05-01 Karishma

http：// matthewjamestaylor。com/blog/keep-footers-at-the-the-the-the-the-page看看这个;） – DiederikEEn 2013-05-01 09:09:30

首先，我会问你是否显示了body body的整个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％的高度。为什么？那么......从技术上讲，这是...但它的父母不是。因此，像一个勇敢的乐乐棒球教练，我们需要告诉该元素的父母做什么：

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

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

当当！让我知道你是否需要更多关于如何适用于你的场景的澄清。 :)

针对您的具体目标更有针对性，请尝试this article解释position: relative;作为父元素。如果父元素具有属性position: relative;，则任何包含position: absolute;的子元素都将自己定位到父元素。

来源

2013-10-02 16:07:10 Plummer

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

回答

相关问题