我的CSS代碼中的布局有問題

Question

我有此網頁，我正在使用該網頁來練習一些html和CSS，而無需使用任何所見即所得的編輯器。 但是有些事情我找不到實現的方法。

1. 標頭，我想將其一直放置。 並且不顯示標題和容器邊框之間的空白
2. 段落文本從容器中移出。 如何將文字保留在里面？
3. 頁腳不顯示

小提琴

的HTML

<div id="container">
    <div id="header">
        <h1>My Resume</h1>
    </div>
    <div id="sidebar">
        <ul>
            <li><a href="localhost">Java</a></li>
            <li><a href="localhost">Bash</a></li>
            <li><a href="localhost">PHP</a></li>
            <li><a href="localhost">MySQL</a></li>
        </ul>
    </div>
    <div id="mainContent">
        <p>akdjfaskdfjasdkfjaskdfjaskdfjaskdfjaskdjfskdfjassdkjfadfkjasdkfjaadfkakdfjadkfjdskfa</p>

        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
        </ol>
        <a href="localhost"><img src="localhost"></a>
    </div>
    <div id="footer">
    </div>
</div>

的CSS

h1 {
    text-align:center;
}

#container {
    width:800px;
    height:500px;
    background-color:#ffffff;
    margin:auto;
    border:1px solid #000000;
    /*text-align:left;*/
}

#header {
    text-align:center;
    height:200px;
    background-color:brown;
    margin:0 auto;


}

#sidebar {
    margin:0 auto;
    float:left;
    width:200px;
    height:200px;
    background:red;

}

#mainContent {
    margin:0 auto;
    background-color:white;
    width:600px;
    height:200px;
    float:left;
}

#footer {
    height:50px;
    margin:0 auto;
    background-color:orange;
}

Answer 1

嘗試將其放在初學者的CSS頂部

            *
            {
                padding:0;
                margin:0;
            }

這將默認使用您的所有元素，並減少瀏覽器添加的額外填充和邊距。

然后為每個元素提供自己的邊距或填充或不填充。

Answer 2

我將這些添加到您的CSS：

/* added to remove whitespace */
*
{
    margin: 0;
}

/* added to #mainContent to wrap text */
        white-space: -moz-pre-wrap !important;  
        white-space: -pre-wrap;      
        white-space: -o-pre-wrap;    
        white-space: pre-wrap;       
        word-wrap: break-word;      
        word-break: break-all;
        white-space: normal;

 /* added to #footer to make it appear */
        width: 100%;
        overflow: hidden;

在這里演示

Answer 3

您3問題解決了看到這個FIDDLE DEMO

* {
    padding:0;
    margin:0;
} 
#mainContent p{
    word-wrap:break-word;
}
#footer {
    clear:both;
    height:50px;
    margin:0 auto;
    background-color:orange;
}

加上clear:both; 進入頁腳。有關以下內容的更多詳細信息： 清除

Answer 4

Guess you should take care of the height of the footer which is defined as 50px; Because your footer style got merged with your container and hence you were not able to see your footer.
Your css should be some what like this:
h1 {
        text-align:center;
    }

    #container {
        width:800px;
        height:800px;
        background-color:#ffffff;
        margin:auto;
        border:1px solid #000000;
        /*text-align:left;*/
    }

    #header {
        text-align:center;
        height:200px;
        background-color:brown;
        margin:0 auto;


    }

    #sidebar {
        margin:0 auto;
        float:left;
        width:200px;
        height:200px;
        background-color:red;

    }

    #mainContent {
        margin:0 auto;
        background-color:Cyan;
        width:600px;
        height:200px;
        float:left;
    }

    #footer {
        height:200px;
            width:800px;
        margin:0 auto;
        background:Green;
    }