0

わかりましたので、私がしなければならないこのメニューがあります。少なくともページの 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;
}
4

1 に答える 1

2

box-sizing救助へ！

#menu {box-sizing: border-box; min-height: 100%; padding: whatever;}

プレフィックスバージョンは次のとおりです。

  • -moz-box-sizing: border-box;
  • -webkit-box-sizing: border-box;

ブラウザのサポートはかなり良いです。jQueryともうまく連携します。

于 2012-09-27T17:33:16.663 に答える