溢出与CSS定位

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> 

我有这样的代码，我试图使它在列表中的元素占据红格框的100％。现在，名单不在我想要做的事情之外了。我如何让黑色的div（列表项）填满100％的红色div，而不是去红色的div之外？

Answer 1

我改变了你的标记了一点，没有必要为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 2

如果你想黑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元素相对于它的第一个定位的祖先而定位，在你的例子中它是身体，但你需要它是#con。然后我对你的ul的CSS规则做了一些小的修改，这样它就占用了红色div的所有空间。

Answer 3

一个工作小提琴 - >http://jsfiddle.net/2VvTu/

你需要你的容器元素设置的位置是：相对的;并将你的表格单元格留下。

方框尺寸属性计算边框和边距作为宽度的一部分（而不是默认将其添加到宽度顶部） - >您需要供应商在适当的时候添加前缀。更多有关在这里 - >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; 
}