浏览器如何让两个div在同一行，高度相同

发布于 2024-10-22 06:57:32 字数 1018 浏览 3 评论 0原文

例如，这是我的页面布局，

++++++++++++++++++++++++++
+       +  div2 +       +
+ div1   +     +       +
+       +       + div3  +
+       +++++++++       +
+       +       +       +
+       +       +++++++++
+       +               +
++++++++++++++++++++++++++

如图所示，div1和div2和div3在同一行，

<div id="container" style="width:100%;min-height:500px;">
    <div id="div1" style="float:left;width:19%;height:100%"></div>
    <div id="div2" style="float:left;width:1%;height:100%">
       <img src="toggle.gif" /></div>
    <div id="div3" style="float:left;width:80%;height:100%"></div>
</div>

但它们不具有相同的高度，因为它们的内容不一样。

即使我设置了其父元素的最小高度，并将其高度设置为 100%。

我认为 div#container 的高度必须 > 500 像素。

而且三个div的高度都是100%，所以它们至少应该占500px。

但看来我错了。我想知道发生了什么事？

BWT，div2里面只有一个图标，用于切换div1（使用jquery），但是当div1隐藏时，div3也只占据浏览器窗口的80％，如何使div2和div3占据整个窗口？

我知道我可以使用jquery来设置它们的大小，但我不知道这是否可以通过浏览器实现？

原文

For example,this is my page layout,

++++++++++++++++++++++++++
+       +  div2 +       +
+ div1   +     +       +
+       +       + div3  +
+       +++++++++       +
+       +       +       +
+       +       +++++++++
+       +               +
++++++++++++++++++++++++++

As shown,the div1 and div2 and div3 are at the same line,

<div id="container" style="width:100%;min-height:500px;">
    <div id="div1" style="float:left;width:19%;height:100%"></div>
    <div id="div2" style="float:left;width:1%;height:100%">
       <img src="toggle.gif" /></div>
    <div id="div3" style="float:left;width:80%;height:100%"></div>
</div>

But they do not own the same height since the content of them are not the same.

Even I set the min-height of their parent element,and set the height of the to 100%.

I thought the div#container's height must > 500px.

And the three divs'height are all 100%,so they should take at least 500px.

But it seems that I am wrong. I wonder what is going on?

BWT,inside the div2 there is just a icon which used to toggle the div1(use jquery),however when the div1 hidden,the div3 also take only 80% of the browser window,how to make the div2 and div3 take the whole window?

I know I can use the jquery to set their size,but I wonder if this can be implemented by the browser?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┼── 2024-10-29 06:57:32

当您以 % 形式指定浮点数时，浮点数不会根据其父级的高度来计算其高度。所以你的100%并不是指父母的身高。
您可能应该采用的方法是使用position:absolute;顶部：0； Bottom:0; 而不是 float:left; height 100%; 那么唯一的问题是父级（在您的例子中是容器）不会根据任何子级的高度而增长。然后，您应该指定 container 的高度，或者将其任何子列设为不是 position:abosute。
试试这个：

<div id="container" style="width:100%;height:500px;position:relative;">
<div id="div1" style="background:blue; position:absolute; top:0; bottom:0; width: 19%;"></div>
<div id="div2" style="background:red; position:absolute; top:0; bottom:0; width: 1%; left: 19%;">
   <img src="toggle.gif" /></div>
<div id="div3" style="background:green; position:absolute; top:0; bottom:0; width:80%; left:20%;"></div>

jsfiddle：http://jsfiddle.net/jVRpK/

Floats don't calculate their height based on the height of their parent when you specify it in %. So your 100% doesn't refer to the height of the parent.
The approach that you should probably chase is using position:absolute; top:0; bottom:0; instead of float:left; height 100%; The only issue then is that the parent (in your case container) will not grow according to any of it's children's height. You should then either specify the height for container or make any of it's children columns not position:abosute.
Try this:

<div id="container" style="width:100%;height:500px;position:relative;">
<div id="div1" style="background:blue; position:absolute; top:0; bottom:0; width: 19%;"></div>
<div id="div2" style="background:red; position:absolute; top:0; bottom:0; width: 1%; left: 19%;">
   <img src="toggle.gif" /></div>
<div id="div3" style="background:green; position:absolute; top:0; bottom:0; width:80%; left:20%;"></div>

jsfiddle: http://jsfiddle.net/jVRpK/

回复收藏 0 原文