1

ヘッダー、コンテンツ、フッターが必要な html ページを作成しました。これら 3 つの部分はすべて div で囲まれ、次のようになります。

しかし、ヘッダー div が提供された全スペースを占有していないことがわかります (つまり、高さ: CSS で 50%)。

CSS で 100% の高さが指定されていますが、コンテンツ div (テーブルを含む) はヘッダー div とフッター div の間の使用可能なスペースを占有しません

書いたhtmlは以下の通り。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Html with divs</title>
<style type="text/css">

h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}

html{
    height:100%;

}
body{
    font-family:Arial,Verdana,sans-serif;
    font-size:0.75em;
    color:#333;
    width:100%;
    margin:0 auto;
    padding:0px;
}


#header1
{
    background-color: steelblue;
    height: 50%;
}


h1{
    font-family:Calibri, Arial, Verdana, sans-serif;
    font-size:2em;
    width:520px;
}


#content
{
    background-color: orange;
    padding: 5px;
height:100%;

}

#content table
{
width:100%;
}



#footer {
        position:absolute;
        bottom: 0px;
    width: 100%;
        height:70px;
        }
#footer div#navigation {
    background: steelblue;
        height: 70px;
    width: 100%;
}

#footer div#navigation div {
    margin: 0 auto;
    width: 100%;
}

#footer div#navigation div p {
    color: #995870;

        color:white;
        width:100%;
        align:center;
        font-size: 11px;
    margin: 0;
    text-align: center;

}

</style>
</head>
<body>


    <div id="header1">
        <p align="center">Header1</p>
        <p align="center">Header2</p>
        <p align="center">Header3</p>

    </div>

    <div id="content">

                <table bgcolor="#fadd09" align="center" style="color:white">
                    <tr><td>Text1 here</td><td>  <input type="text" name="value1"/></td></tr>
                    <tr><td>Text2 here</td><td>  <input type="text" name="value2"/></td></tr>
                    <tr><td>Text3 here</td><td>  <input type="text" name="value3"/></td></tr>
                    <tr><td>Text4 here</td><td>  <input type="text" name="value4"/></td></tr>
                    <tr><td>Text5 here</td><td>  <input type="text" name="value5"/></td></tr>
                    <tr><td>Text6 here</td><td>  <input type="text" name="value6"/></td></tr>
                    <tr><td>Text7 here</td><td>  <input type="text" name="value7"/></td></tr>
                    <tr><td>Text8 here</td><td>  <input type="text" name="value8"/></td></tr>
                    <tr><td>Text9 here</td><td>  <input type="text" name="value9"/></td></tr>
                    <tr><td>Text10 here</td><td>  <input type="text" name="value10"/></td></tr>

                </table>


    </div>

            <!--Footer-->
        <div id="footer">
            <div id="navigation">
                <p style="color: ivory;font-size: 15px;">footer-head</p>
                <div style="float: inherit">
                    <p>The footer</p>
                    </div>
            </div>
        </div>

</body>
</html>
4

2 に答える 2