将行高设置为屏幕的百分比

时间:2013-09-10 18:56:02

标签: html css html5 css3

我有一个网站,基本上由5个列表项组成。说我的身体的宽度和高度是400px。我希望能够在整个身高上传播列表中的项目(无论身高的值是多少)。

我正在查看line-height属性,但我似乎无法弄清楚如何正确使用它。如果我将margin的{​​{1}}属性更改为li,则列表项会稍微展开。输入保证金的%值会超出屏幕限制的列表范围。

如何在整个屏幕上展开列表项,无论屏幕的高度是多少?

HTML文件:

1em 0;

CSS文件:

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="style.css" type="text/css" media="screen, mobile" />

        <title>Test</title>
    </head>
    <body>
        <division id="container">
            <ul>
                <li><label id="namelabel">Naam</li>
                <li><img id="photo" src="" /></li>
                <li><label id="price">12.29</label></li>
                <li><label id="deltime">3</label></li>
                <li><img id="logo" src="x.png"/></li>
            </ul>
        </divion>
    </body>
</html>

2 个答案:

答案 0 :(得分:1)

html {height:100%;}
body {height:100%; margin:0; padding:0;}
ul {list-style-type:none; height:100%; margin:0; padding:0;}
li {height:20%; margin:0; padding:0;}

http://jsfiddle.net/WrJvA/

答案 1 :(得分:1)

以下内容可能与您的需求接近:

#container {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    border: 1px dotted blue;
}

ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
}
li {
    margin: 0;
    padding: 0;
    height: 20%;
}
li:nth-child(even) {
        background-color: beige;
}

#logo {
    vertical-align: top;
    width: auto;
    height: 100%;
}

容器块设置高度,您希望通过继承将该高度传递到ul,然后将li传递给20%,因为您有5个元素。

我将<division>代码更改为<div>(也许您打算<section>代替)。

请参阅演示:http://jsfiddle.net/audetwebdesign/gwh9L/

请注意在ulli上清零边距和填充,否则会出现额外的空白问题。

您也可以根据需要将其缩放到视口。