好吧,我有这个菜单我必须做,它需要至少 100% 的页面(但不是实际的 css 100% 因为我有一些填充和边距所以它变得太长了)并且它如果屏幕尺寸太小无法显示所有链接,则必须变得更大。
html:
<div id="menu">
<a href="index.html"><button><img src="img/open.png"/><div>Acceuil</div></button></a>
<a href="carte.html"><button><img src="img/toggled.png"/><div>La carte</div></button></a>
<a href="traiteur.html"><button><img src="img/toggled.png"/><div>Service traiteur</div></button></a>
<a href="reservation.html"><button><img src="img/toggled.png"/><div>Réservation</div></button></a>
<a href="gite.html"><button><img src="img/toggled.png"/><div>Gîte</div></button></a>
</div>
CSS:
#menu{
background-color: #850101;
box-shadow: inset 0 0 25px rgba(0,0,0,.45);
padding-top: 114px;
margin-left: 5%;
min-height: auto;
display: block;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
z-index: 1
}
#menu button{
background-color: #640404;
box-shadow: inset 0 0 25px rgba(0,0,0,.45);
border: none;
width: 100%;
color: #fff;
font-size: 30px;
height: 60px;
text-align: left;
padding: 5 0;
margin-bottom: 7px;
}
#menu button:hover{
background-color: rgba(94,1,1,0);
}
#menu img{
margin-right: 30px;
padding-bottom: 2px;
margin-left: 5px;
}
#menu button div{
display: inline;
position: absolute;
}
最佳答案
box-sizing
来拯救!
#menu {box-sizing: border-box; min-height: 100%; padding: whatever;}
前缀版本是:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
浏览器支持是 pretty darn good .也可以很好地与 jQuery 搭配使用。
关于html - CSS 100% 高度问题又来了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12626976/