Question

http://jsfiddle.net/myxzh/6/

ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
top: -10px;
}

li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;  
}

#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
}

#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}

<div id="con">
<div id="logo">
</div>
<div id="list">
<ul>           
       <li><a href="news.asp">Hello</a></li>
       <li><a href="contact.asp">Hello</a></li>
       <li><a href="about.asp">Hello</a></li>
   </ul>
</div>
</div>

我有这个代码，我正在努力使列表元素占据红色div框的100％。现在，列表超出了红色div，这不是我想要做的。如何使黑色div（列表项）填满红色div的100％而不是超出红色div？

Answer 1

如果您希望黑色div占据红色div的高度和宽度的100％，请将CSS更改为：

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding:0;
    position: absolute;
    margin:0;
    bottom:0;
    height:100%;
}
li {
    display: table-cell;
    height: 150px;
    border: 1px solid black;
    text-align: center;
    vertical-align: bottom;
}
#con {
    width: 100%;
    border: 1px solid red;
    height: 200px;
    overflow: hidden;
    position:relative;
}
#logo {
    width: 80%;
    height: 100px;
    margin: 10px auto;
    border: 1px solid yellow;
    z-index: 1;
}

<强> jsFiddle example

我将position:relative;添加到您的#con div中，因为您的绝对定位ul元素相对于它的第一个定位祖先定位，在您的示例中是主体，但您需要它{{1} }}。然后我对你的#con的CSS规则进行了一些小改动，以便占用红色div的所有空间。

Answer 2

我改变了你的标记，不需要div #list，这就是为什么ul存在。

这是css

#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position: relative;
}

#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}

#list {
width: 100%;
list-style: none;
position: absolute;
top: 0px;
margin: 0;
padding: 0;
}

li {
float: left;
width: 33.1%;
height: 200px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;  
}

这还不错吗？

http://jsfiddle.net/myxzh/11/

Answer 3

工作小提琴 - ＆gt; http://jsfiddle.net/2VvTu/

您需要将容器元素设置为position：relative;然后把桌子上的细胞漂浮起来。

框大小调整属性计算边框和边距作为宽度的一部分（而不是在宽度顶部添加它们的默认值） - ＆gt;您需要在适当的时候给供应商添加前缀。更多关于这一点 - ＆gt; http://paulirish.com/2012/box-sizing-border-box-ftw/

li {
-webkit-box-sizing: border-box;
display: inline-block;
height: 150px;
margin: 0;
padding: 0;
text-align: center;
width: 33.33%;
float: left;
border: thin purple dashed;
}

CSS定位溢出

3 个答案: