1

これは本当に基本的なcssの質問かもしれませんが、本の指示に従って流動的なレイアウトを作成しようとしました.これまでのところ、ヘッダーとナビゲーションバーは所定の位置にあるようですが、コンテンツのdivはそうではありません.私のコンテンツの高さは柔軟です。これは動的 Web アプリ用であるため、それに応じてフッターを下に配置する必要があります。わかりましたので、これがidが達成したいもののモックアップです ここに画像の説明を入力

<body>

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">My account</a></li> 
    <li><a href="">Help</a></li> 
    <li><a href="">Contact Us</a> </li> 
    </ul>

</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">

</div>
<div id="footer">
<p>&copy; TEST</p>
</div>
</body>
</html>

ここに私のcssコードがあります:

body{
width: 90%;
margin: 0 auto;}

#content {
overflow: auto;
height: 29em;}

#header{
height: 60px;
overflow: hidden;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#personalised p {
float: left;
width: 20%;
margin-top:5%;}

#navigation{
margin: 1%;}

#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}

div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }

#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}

長くなってしまいましたが、よろしくお願いします。前もって感謝します

4

2 に答える 2

2

最初にフォーマットに取り組んでみてください。(それほど悪くはありませんが、改善することができます。) これは、コードが読めるという最大の利点の 1 つです。ここで私がやったことを見て、好きなもので遊ぶことができます。http://jsfiddle.net/mPH8X/

<head>
<style>
div {
 border: 1px dashed #FF0000;
}
body {
    margin: 0px;
    padding: 0px;
}

.clear {
    clear: both;
}

#header {
    min-height: 60px;
    overflow: hidden;
    margin: 1%;
}
#header h1 {
    float: left;
}
#header ul {

    float: right;
}
#header li {
    display: inline;
    padding: 0.5em;
}

#navigation{
    margin: 1%;
    float: right;
}

#navigation ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#navigation ul li {
    margin: 0px;
    padding: 0px;
    display: block;
    position: relative;
    float: left;
}

#navigation li ul { 
    display: none; 
}

.body {
    clear: both;
}

#personalised {
    margin: 1%;
    float: left;
    width: 20%;
}

#content {
    margin: 1%;
    float; right;
    min-height: 29em;
}

#personalised p {
    margin: 0px;
    padding: 0px;
}

#header, #footer, #navigation, #personalised {

}

#footer {
    padding: 0.5em 0;
    font-family: Arial, Verdana;
    font-size: 10px;
    text-align: center;
}
</style>
<body>

<div id="header">
    <h1>LOGO</h1>
    <ul>
        <li><a href= ""> Home </a></li>
        <li><a href= ""> Logout </a></li>
    </ul>
    <div class="clear"></div>
</div>

<div id="navigation">
    <ul>
        <li><a href="">Home</a></li> 
        <li><a href="">My account</a></li> 
        <li><a href="">Help</a></li> 
        <li><a href="">Contact Us</a> </li> 
    </ul>

    <div class="clear"></div>
</div>

<div class="body">
    <div id="personalised">
        <p>Hey there</p>
        <div class="clear"></div>
    </div>

    <div id="content">

    </div>
</div>

<div id="footer">
    <p>&copy; TEST</p>
</div>
</body>
</html>

編集: コンテンツ ステートメントを見ると、CSS の min-height を探しています。Min-height は、最小の高さに設定し、必要に応じて成長させます。オーバーフロー: 自動; コンテンツが最大の高さを超えて伸びている場合は、スクロールバーを追加します。

于 2013-02-15T00:56:45.727 に答える
1

犯人はこれだと思います：

#content {
overflow: auto;
height: 29em;}

コンテンツ div の高さを明示的に設定しています。継承するように設定してみてください。

これは、コンテナ内の要素の数に応じてコンテナが成長するフィドルです。

http://jsfiddle.net/pUb6q/2/

レイアウトを使用します。変更点は

#content {
    border:1px solid black;
    float: right;
    overflow: auto;
    height: inherit;
}
于 2013-02-15T00:55:57.850 に答える