3列html模板 - 内容溢出虽然有清楚两者和高度是100％ [英] 3 column html template - content overflows though there is clear both and height is 100%

问题描述

我在包装器中有3个div：

 < div id =wrapper> 
 
< div id =leftbar> 
 Lorem ipsum dolar sit amet 
< / div><！ -  LEFTBAR  - > 
 
< div id =middle> 
 Lorem ipsum dolar sit amet 
< / div><！ -  middle  - > 
 
< div id =rightbar> 
 Lorem ipsum dolar sit amet 
< / div><！ -  RIGHTBAR  - > 
 
< / div><！ -  wrapper  - > 
  

'leftbar'和'middle'都向左浮动，'rightbar' 'wrapper'has height：100％;但是，如果在'middle'中有大量的文本或内容，它会溢出'wrapper' div。我很难弄清楚为什么会发生这种情况。

我的CSS是：

  #wrapper {
 width：1000px; 
 height：100％; 
 margin：auto; 
 padding：30px; 
 margin-top：40px; 
 background-color：#FFF; 
 color：＃000; 
 border：2px solid＃828fc4; 
 clear：both; 
} 
 
 #leftbar {
 float：left; 
 width：150px; 
 min-height：450px; 
 padding：5px; 
} 
 
 #middle {
 float：left; 
 height：100％; 
 width：580px; 
 padding-left：20px; 
 padding-right：20px; 
 border-right：1px dotted＃2B308C; 
 border-left：1px dotted＃2B308C; 
} 
 
 #rightbar {
 float：right; 
 width：200px; 
 min-height：450px; 
 padding：5px; 
} 
  

感谢任何建议！

解决方案

当你编辑你的问题，我刚刚知道它是如何溢出，这是因为你使用 height：100％; ，因此您的div不会超出视口，因此请改用 height：auto; ，并使用 overflow：auto; ＃ 代替 clear：both; ）

I have 3 divs within a wrapper:

<div id="wrapper">

<div id="leftbar">
Lorem ipsum dolar sit amet
</div><!--LEFTBAR-->

<div id="middle">
Lorem ipsum dolar sit amet
</div><!--middle-->

<div id="rightbar">
Lorem ipsum dolar sit amet
</div><!--RIGHTBAR-->

</div><!--wrapper-->

Both 'leftbar' and 'middle' are floating left, whilst 'rightbar' is floating right. 'wrapper' has height:100%; clear:both; set.

However, if there is a large amount of text or content in 'middle' it overflows the 'wrapper' div. I am struggling to figure out why this is occurring.

My CSS is:

#wrapper {
    width: 1000px;
    height: 100%;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
}

#leftbar {
    float:left;
    width: 150px;
    min-height: 450px;
    padding: 5px;
}

#middle {
    float:left;
    height: 100%;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

#rightbar {
    float:right;
    width: 200px;
    min-height: 450px;
    padding: 5px;
}

Any advice is appreciated!

解决方案

As you edited your question, I just came to know how it was overflowing, it is because you are using height: 100%;, so your div wont exceed the viewport, so use height: auto; instead and also use overflow: auto; for #textcontent instead of clear: both; as Musa told you to do..(Checked with firebug)

这篇关于3列html模板 - 内容溢出虽然有清楚两者和高度是100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！