1

CSS と HTML は初めてで、簡単な HTML ページを作成しようとしています。

実装について: 相対的な配置を持つコンテナーと呼ばれるメイン div があります。このメイン div 内には、さらに 3 つの div があります。header- 絶対位置が上: 0px、menu- も絶対位置、footer- 絶対位置が下: 0px です。私の主な問題は、メニュー div とフッターの間に配置されるコンテンツ div に関するものです。このコンテンツ div に多くの情報がある場合、その高さはメインの div (コンテナー) よりも大きくなり、コンテンツ div からの情報の上にフッターが表示されます。

位置を指定せず、メニュー div の下に padding-top を配置しようとしましたが、最後の 2 ～ 3 行がフッターの下で失われます。粘着性のあるフッターは、私が探しているものではないと言わざるを得ません。別の解決策が必要です。

これは HTML:

<body>
        <!-- CONTAINER -->
        <div id="container">
            <!--HEADER-->
            <div id="header" >
                <p>Header</p>
            </div>
            <div id="menu" >
                <ul>
                    <li>Menu Item 1</li>
                    <li>Menu Item 2</li>
                    <li>Menu Item 3</li>
                    <li>Menu Item 4</li>
                    <li>Menu Item 5</li>
                </ul>
            </div>
            <!-- Problematic div -->
            <div id="content"> // simulate large amount of information
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
            </div>
            <div id="footer">
                <p> Footer </p>
            </div>
        </div>
    </body>

およびCSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

#container{
    position : relative;
    min-height:100%;
}

#header{
    top : 0px;
    position : absolute;
    width : 100%;
    height : 100px;
    background-color: red;
}

#header p{
    position : absolute;
    top : 39px;
}


#menu{
    position : absolute;
    top : 100px;
    width: 100%;
    background-color: yellow;
    overflow: auto;
    white-space:nowrap;
}

#menu ul{
    margin : 0px;
    padding-left: 20px;
    list-style-type: none;
}
 #menu li{
    display : inline-block;
    padding-right: 150px;
    border-style : 1px solid;
 }

 #content{
    /*
    padding-top : 121px;
    */
    position: absolute;
    top : 120px;
    width : 100%;
    background-color: green;
 }

 #footer{
    position: absolute;
    width: 100%;
    height : 60px;
    background-color:grey;
    bottom : 0px;
 }

長い投稿で申し訳ありません。できるだけ問題を説明しようとしました。どうもありがとう。

4

4 に答える 4