2

ここでフィドル：

http://jsfiddle.net/JzbDj/

サイズをピクセル単位で指定せずに、各 div でビューポートを埋めようとしています。これどうやってするの？現在、div はその中の h1 要素と p 要素のテキストと同じ大きさです。高さを 100% に設定し、html 要素と body 要素についても同じことを試してみました...

<title>mountains</title>
<body>
    <div id="denali" class="fullPageDiv">
        <h1>denali</h1>
        <p>Denali is the highest mountain in North America. Due to a disagreement between the Boards of Geographic Names in Alaska and the United States, the peak's official name is Denali according to Alaska and Mount McKinley according to the United States.</p>
    </div>
    <div id="mountlogan" class="fullPageDiv">
        <h1>mount logan</h1>
        <p>Mount Logan is the second tallest peak in North America.</p>
    </div>
</body>
</html>

CSS:

body {
    font: 18px/30px Sans-serif; 
    margin: 0;
    padding: 0;
    min-height:1000px;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

.fullPageDiv {
    position: relative;
    min-height: 100%;
    width: 100%;
    overflow: hidden;
}

#denali {
    background-color: red;
}

#mountlogan {
    background-color: green;
}

#citl {
background-color: yellow;
}

#mountsaintelias {
    background-color: blue;
}



#popo {
background-color: red; 
}
4

2 に答える 2