CODEWITHSUNDEEP
htmlcss
Joetjah
Joetjah

Reputation: 6132

Set line-height to a percentage of the screen

I have a website which basically consists of 5 list items. Say my body's width and height are 400px. I'd like to be able to spread the items of the list over the full body height (regardless of what the value of body height is).

I was looking into the line-height property, but I can't seem to figure out how to use that properly. If I change the margin property of the li to 1em 0;, the list items get spread out a bit. Entering a % value for margin spreads out the list way beyond the screen limit.

How can I spread the list items over the complete screen, regardless of what the height of the screen is?

The HTML file:

<!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>

The CSS file:

body {
    width: 400px;
    height: 400px;
}

ul {
    list-style-type: none;
    text-align: center;
}

li {

    margin: 100%;
    margin: 1em 0;
}

#container {
}

#logo {
    width: 150px;
    height: 100px;
}

Upvotes: 0

Views: 830

Answers (2)

Marc Audet
Marc Audet

Reputation: 46825

The following may be close to what you need:

#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%;
}

The container block sets the height, and you want that height to pass through to ul by inheritance, and then to li as 20%, since you have 5 elements.

I changed the <division> tag to <div> (maybe you intended <section> instead).

See demo at: http://jsfiddle.net/audetwebdesign/gwh9L/

Be careful about zero-ing out margins and padding on ul and li, otherwise extra white space becomes an issue.

You can also scale this to the view port depending on what you need.

Upvotes: 1

andi
andi

Reputation: 6522

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/

Upvotes: 1

Related Questions