Question

我想将页面分成两个＆＃34; div＆＃34; s。左（25％）和右（75％）。我希望两者之间有一个边界，将它们分开。但除非我将文字/图像输入到＆＃34; 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;
}

帮助？

Digvijay

Answer 1

仅当容器也设置了特定的高度时，内联元素的百分比height才有效，最高可达body和html。

这个CSS应该有效：

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

另一种常见的解决方法是所谓的“人造柱”方法：

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

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

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>

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;
}

Answer 4

您可以使用类似的内容：

/ css代码 /

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

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

4 个答案: