4

我想将页面分成两个“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;
}

帮助？

迪格维杰

4

4 回答 4

4

height仅当容器也设置了特定高度时，以百分比设置内联元素才有效，直到bodyand 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; }
于 2012-09-16T17:20:14.933 回答
0

看看这个：

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>​​​​​​​​​​​​​​​
于 2012-09-16T17:20:33.840 回答
0

除非您还在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;
}​
于 2012-09-16T17:37:14.907 回答
-1

你可以使用类似的东西：

/ css代码/

height:calc(100%-2px);
border:1px solid black;
于 2018-10-26T10:05:09.187 回答