1

セクションが 1 つあり、その中に 3 つのセクションがあります。

 <section id="home">

 <article id="rechts">
<h1>Übersicht</h1>
 </article>
 <article id="mitte">
<h1>Leute</h1>
 </article>
 <article id="links">
<h1>Links</h1>
 </article>

 </section>

記事をサイトの高さの 90% にするようにしました。SO i は、body と section に 100% の高さを追加しました。そしてもちろん記事の高さは 90% にしました。しかし、どういうわけかうまくいきませんでした。jqueryには非常に簡単な解決策があることは知っていますが、cssを使いたいと思っています。

http://jsfiddle.net/g6JyD/

私のCSS：

body { width:100%;
    background-color:#ecf0f1;
    height: 100%; }

section { width: 90%;
    margin: 0px auto;
    height: 90%
     }

article {
    width:29%;
    font-family: 'Open Sans', sans-serif;
    float: left;
    margin: 5% 2% 10% 2%;
    padding: 0px;
    height: 100%;
}

#rechts {
    background-color: #9b59b6
}

#mitte {
   background-color:  #16a085;
}

#links {
    background-color: #f1c40f;
}
4

3 に答える 3

1

height: 100%にも追加しましょうhtml：

html {
    height: 100%;
}

今それは動作します！

ねえ、まだ何か問題があります。一部の余白がレイアウトを台無しにしています。デフォルトのマージンとパディングをリセットして修正しますbody

body {
    margin: 0;
    padding: 0;
}

今、フィドルが揺れる！

于 2013-10-14T19:38:27.330 に答える
0

これがこれを修正するかどうかはわかりませんが、あなたは言いました

記事をサイトの高さの 90% にするようにしました。SO i は、body と section に 100% の高さを追加しました。そしてもちろん記事の高さは 90% にしました。

実際にCSSでセクションに90％、記事に100％を指定した場合

section { width: 90%;
margin: 0px auto;
height: 90%
}

article {
width:29%;
font-family: 'Open Sans', sans-serif;
float: left;
margin: 5% 2% 10% 2%;
padding: 0px;
height: 100%;
}
于 2013-10-14T19:40:46.273 に答える