Question

这就是我想要的 -
1. div应具有最小高度100％，以使其边框显示全屏
它应该在水平中间。
3.内容应该是拉伸的。

现在问题是所有这3件事情都在起作用，但最后“你好”正在走出容器。我用过clear float。但它不起作用。用css技巧帮我解决一下。或指出我做错了什么。
这是jsfiddle链接 - http://jsfiddle.net/2U5hh/

这是我的HTML代码 -

<body>
  <table class="clearfix">
   <tr height="15%">
    <td id="image_td">
      <img src="img/smthing.png" alt="E-Learn" />
    </td>
  </tr>
  <tr height="85%">
    <td>
      <div id="td_content_div">                        
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
      </div>
     </td>
  </tr>
 </table>
</body>

这是css代码 -

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

.clearfix {
max-width: 500px;
margin: 2% auto;
border-radius:25px;
padding:2% 2% 5% 2%;
height:96%;
width:96%;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
}



#image_td{
float: right;
margin-right: 5%;
margin-top: 2%;
}

#image_td  img{
max-width:96%;
height:auto;
}

#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
height: 94%;
 margin:3% 3% 1% 3%;
vertical-align: middle;
}

Answer 1

将height:auto;添加到#td_content_div

Answer 2

#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
height: 94%;
margin:3% 3% 1% 3%;
vertical-align: middle;
height:auto;
}

p { margin-left:20px; }

http://jsfiddle.net/Pzz22/3/

Answer 3

我不确定你想要什么，但如果你只想让最后一个p留在容器中，我所做的就是将#td_content_div的高度改为100％，它似乎有效。您可以完全删除该id上的高度声明，但它似乎不尊重段落的边距。根据具体情况，这可能是预期的效果。

Answer 4

您需要将高度：自动和溢出：自动设置为：

#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
 margin:3% 3% 1% 3%;
vertical-align: middle;

height: auto;
overflow:auto
}

如果你只设置高度：auto，圆角上会有一些丑陋的内容。干杯!

文本离开div容器

4 个答案: