如何设置带边框的高度为100％的Div？

Question

我想把页面分成两个"div"，左边占25%，右边占75%。我希望在两者之间有一个边框来将它们分开。但是除非我在"div"中输入文本/图像，否则它们不会扩展。

<div>
    <div class="left">
        <img src="granted_300_50.png" id="logo">
    </div>  
</div>

以下是CSS代码：

div.left{
    background-image: url("flower_ornament2_watermark.png") ;
    background-repeat: no-repeat;
    background-color:white;
    border-top: 0px;
    border-right: 2px solid #c3c3c3; 
    border-left: 0px;
    border-bottom: 0px;
    white-space: nowrap;
    height: 100%;
    width: 350px;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}

Help?

Digvijay

- digvijay91

Answer 1

在行内元素上以百分比设置height只有在容器也设置了具体的高度，直到body和html才能生效。

以下CSS应该可以正常工作：

html,body { height:100% ;}
div#container { height:100%; }
div.left { height:100%; }

---

另一种常见的解决方法是所谓的“假列”方法：

• http://www.alistapart.com/articles/fauxcolumns/
• http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

---

您还可以使用display:table;作为容器，display:table-cell;作为浮动div。但IE7不支持此方法。

div#container { display:table; }
div.left { display:table-cell; }

- Giona

Answer 2

看一下这个： CSS

.left{
    width:25%;
    height:100px;
    border-right:1px solid #ccc;
}

.right{
    width:75%;
    height:100px;
    border-left:1px solid #ccc;
}

HTML

<div class="left"></div>
<div class="right"></div>​​​​​​​​​​​​​​​

- Linas

Answer 3

除非您还在body和html节点上设置高度，否则它们将会崩溃。您可以通过将它们设置为100%高度来解决这个问题：

演示：http://jsfiddle.net/SO_AMK/Nhajy/

CSS：

html, body, div { height: 100%; }

div.left {
    background-image: url("flower_ornament2_watermark.png");
    background-repeat: no-repeat;
    background-color: white;
    border-top: 0px;
    border-right: 2px solid #c3c3c3; 
    border-left: 0px;
    border-bottom: 0px;
    white-space: nowrap;
    height: 100%;
    width: 350px;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}​

另一种解决方案是设置一个min-height： 演示：http://jsfiddle.net/SO_AMK/MSLdT/ CSS:

div.left {
    background-repeat: no-repeat;
    background-color: white;
    border-top: 0px;
    border-right: 2px solid #c3c3c3; 
    border-left: 0px;
    border-bottom: 0px;
    white-space: nowrap;
    min-height: 100px;
    height: 100%;
    width: 350px;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}​

- A.M.K

Answer 4

你可以使用类似以下的代码：

/CSS 代码/

height:calc(100%-2px);
border:1px solid black;

- Chris P