html - 我的 CSS 代码布局有问题

Question

我有这个网页，我在不使用任何所见即所得编辑器的情况下使用它来练习一些 html 和 css。但有些事情我找不到如何实现。

1. 标题我想把它一直放在上面。并且不显示页眉和容器边框之间的空白区域
2. 段落文本超出容器范围。我怎样才能将文本保留在里面？
3. 页脚未显示ig

Fiddle

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 中:

/* 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;

演示 here