Question

我有一个部分，其中有三个部分：

 <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％。所以我将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;
}

Answer 1

我们也将height: 100%添加到html：

html {
    height: 100%;
}

<强> Now it works!

嘿，还有一些问题。一些边缘正在破坏布局。我们将通过重置 body默认边距和填充

来修复它

body {
    margin: 0;
    padding: 0;
}

现在 fiddle 摇滚！

Answer 2

我不确定这是否会解决这个问题，但你说

我试图将文章制作网站高度的90％。所以我将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%;
}

Answer 3

确保将正确的位置添加到

<section>

元素。这是一个更正的JSFiddle。我为你的section元素更正了CSS：

section { 
    position:absolute;
    width: 100%;
    height: 100%;
        background-color:red;
     }

这样做的原因很简单：只有正确定位的元素才能让他们的孩子继承高度和宽度属性。

如何使文章的网站高度达到90％

3 个答案: