html - 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>

我有这段代码，我试图让它的列表元素占据红色 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 示例

我添加position:relative;到您的#condiv 中，因为您的绝对定位 ul 元素是相对于它的第一个定位祖先定位的，在您的示例中是主体，但您需要它是#con. 然后我对你的 CSS 规则做了一些小改动，ul这样它就可以占据红色 div 的所有空间。

Answer 2

A working fiddle --> http://jsfiddle.net/2VvTu/

You needed to set your container element to position: relative; and float your table cells left.

the box sizing property calculates borders and margins as part of the width (rather than default of adding them on on top of the width) --> you'll need to vendor prefix this as appropriate. More about that here --> 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;
}

Answer 3

我稍微改变了你的标记，不需要 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/