avec dépassement de capacité de positionnement 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> 

J'ai ce code et je suis en train de le faire où les éléments de la liste prennent 100% de la boîte div rouge. À l'heure actuelle, la liste sort de la division rouge, ce qui n'est pas ce que j'essaie de faire. Comment puis-je faire le div noir (éléments de la liste) remplir 100% de la div rouge et ne pas aller en dehors de la division rouge?

Answer 1

J'ai changé votre marque un peu, il n'y a pas besoin de div #list, c'est pourquoi ul existe.

Ceci est le 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; 
} 

Est-ce assez bon?

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

Answer 2

Si vous voulez que le div noir pour prendre 100% de la hauteur et la largeur de la div rouge, changez votre 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

J'ajouté position:relative; à votre #con div puisque votre élément ul positionné en absolu est positionné par rapport à son premier ancêtre positionné, qui dans votre exemple était le corps, mais vous aviez besoin qu'il soit #con. Ensuite, j'ai apporté quelques petites modifications aux règles CSS de votre ul afin qu'elles occupent tout l'espace du div rouge.

Answer 3

Un violon de travail ->http://jsfiddle.net/2VvTu/

Vous aviez besoin de définir votre élément conteneur à la position: relative; et laissez flotter les cellules de votre table à gauche. La propriété de dimensionnement de la boîte calcule les bordures et les marges dans le cadre de la largeur (plutôt que de les ajouter par-dessus la largeur) -> vous aurez besoin du préfixe du fournisseur. En savoir plus sur ce ici ->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; 
}