0

後でもっといじって楽しむレイアウトを作っています。

現在、これは私のHTMLです。

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="top">
    <a class="title" href="index.html">TITLE</a>
</div>
<div id="middle">
    <h2>SubTitle</h2>
</div>
<div id="bottom">
    <ul>
         <a class="nav" href="#"><li>NAV1</li></a>
         <a class="nav" href="#"><li>NAV2</li></a>
         <a class="nav" href="#"><li>NAV3</li></a>
         <a class="nav" href="#"><li>NAV4</li></a>
         <a class="nav" href="#"><li>NAV5</li></a>
    </ul>
</div>
</body>

</html>

そしてCSS。

HTML, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
color: #0d0d0d;
}

#top {
display: block;
width: 100%;
height: 15%;
border-bottom: 2px solid blue;
background-color: #f2f2f2;
box-sizing: border-box;
overflow: hidden;
margin: 0px;
padding: 0px;
}

.title {
display: block;
padding-top: 2%;
width: 100%;
text-align: center;
color: #0d0d0d;
font-family: arial black;
text-decoration: none;
font-size: 4em;
}

#middle {
display: block;
max-width: 600px;
height: 75%;
max-height: 75%;
margin: 0 auto;
}

#bottom {
display: block;
width: 100%;
height: 10%;
background-color: #f2f2f2;
margin: 0px;
padding: 0px;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
width: 100%;
height: 100%;
}

li
{
float: left;
width: 20%;
height: 100%;
text-align: center;
box-sizing: border-box;
border-top: 2px solid blue;
border-right: 2px solid blue;
padding-top: 3%;
overflow: hidden;
-webkit-transition: color 500ms;  
-moz-transition: color 500ms;  
-o-transition: color 500ms;  
transition: color 500ms;   
}

.nav
{
display: inline;
text-decoration: none;
color: #0d0d0d;
font-family: arial black;
}

li:hover
{
color: orange;
}

問題は、ヘッダーや段落などのコンテンツで「中央」の div を埋めると、その高さが変更されて本来あるべき範囲を超えて拡張されるという事実にあります。レイアウトにはスクロール バーがないように意図されているため、div のパーセンテージの合計は 100% になります。

コンテンツを追加すると中央の div が大きくなるのはなぜですか? どうすればこれを修正できますか?

ありがとう。

4

2 に答える 2

0

overflow:hiddenまたはdivoverflow:autoに追加middle

于 2012-11-20T14:56:18.037 に答える
0

余分なコンテンツを単純に切り取りたい場合はoverflow:hidden、middlediv に追加すると問題が解決します。

ただし、より大きな問題は、小さなブラウザー ウィンドウでページを開くだけでも、ほぼすべてのセクションで問題が発生することです。モバイル ブラウザーのようなものは言うまでもありません。

この同様の質問への回答を読んで、代替ソリューションを確認することをお勧めします。

于 2012-11-20T15:00:12.243 に答える