不理解我的模板与内容div的问题(检查链接模板以获得更好的理解)

Question

我正在使用HTML/CSS编写一个模板(链接如下)，但我在完成模板时遇到了很大的挫折。我使用彩色边框来显示我希望我的模板是怎样的。除了一个主要的缺点外，一切都很顺利：

• CodePen上的模板链接
• 页面内容(绿色虚线边框)和.主页(紫色实心边框)不包含.content div，并在添加更多.content div时更改高度。

<header>
    <p class="center-align-VH">Header</p>
</header>

<div class="page-content">

    <div class="main-page">

        <div class="content-title"><a name=""></a><h1 class="center-align-VH">Title - Title - Title</h1></div>

        <div class="content">
            <h2>Assassin's Creed IV Black Flag</h2>
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.<br><br>Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built. The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace. Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built.<br><br>Welcome to the Golden Age of Piracy.</p>
        </div>

        <div class="content">
            <h2>Assassin's Creed IV Black Flag</h2>
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.<br><br>Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built. The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace. Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built.<br><br>Welcome to the Golden Age of Piracy.</p>
        </div>

        <div class="content">
            <h2>Assassin's Creed IV Black Flag</h2>
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.<br><br>Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built. The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace. Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built.<br><br>Welcome to the Golden Age of Piracy.</p>
        </div>

        <div class="content">
            <h2>Assassin's Creed IV Black Flag</h2>
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.<br><br>Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built. The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace. Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built.<br><br>Welcome to the Golden Age of Piracy.</p>
        </div>

        <div class="content">
            <h2>Assassin's Creed IV Black Flag</h2>
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.<br><br>Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built. The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace. Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built.<br><br>Welcome to the Golden Age of Piracy.</p>
        </div>

        <div class="content">
            <h2>Assassin's Creed IV Black Flag</h2>
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.<br><br>Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built. The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace. Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built.<br><br>Welcome to the Golden Age of Piracy.</p>
        </div>

        <div class="content">
            <h2>Assassin's Creed IV Black Flag</h2>
            <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.<br><br>Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built. The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace. Among these outlaws is a brash young captain named Edward Kenway. His fight for glory has earned him the respect of legends like Blackbeard, but also drawn him into the ancient war between Assassins and Templars, a war that may destroy everything the pirates have built.<br><br>Welcome to the Golden Age of Piracy.</p>
        </div>
    </div>

    <div class="sidebar-navigation">
        <div class="sidenavigation"><a>Navigation 01</a></div>
        <div class="sidenavigation"><a>Navigation 02</a></div>
        <div class="sidenavigation"><a>Super ---------- Super Super Super Long Navigation Test 01</a></div>
        <div class="sidenavigation"><a>Super ---------- Super Super Super Long Navigation Test 02</a></div>
    </div>
</div>

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
    background-color: #FFF;
}

header {
    width: 100%;
    height: 60px;
    position: relative;
    border: 2px solid #000;
}

.page-content {
    width: 80%;
    height: 100%;
    margin: 0px auto;
    position: relative;
    border: 2px dashed #0F0;
}

.main-page {
    width: 74%;
    height: 100%;
    padding: 5px;
    margin: 0px auto;
    float: left;
    position: relative;
    border: 2px solid #F0F;
}

.content-title {
    width: 70%;
    height: 60px;
    margin: 0px auto;
    position: relative;
    /*border-bottom: 1px solid #000;*/
    border: 2px solid #000;
}

.content {
    width: 100%;
    padding: 5px;
    margin: 5px 0px;
    position: relative;
    border: 2px solid #000;
}

.sidebar-navigation {
    width: 25%;
    padding: 0PX 5px;
    float: right;
    position: sticky;
    top: 0px;
    border: 2px solid #F00;
}

.sidenavigation {
    width: 100%;
    padding: 5px;
    margin: 5px 0px;
    border: 1px solid #000;
}

.center-align-VH {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

如果你有任何建议或想法，我可以解决这个问题，而不改变一般模板，请告诉我。

Answer 1

从html, body、.page-content和.main-page中移除高度，然后在.page-content div的末尾添加一个div以清除浮点数。参见此jsFiddle

HTML：

    <div class="sidebar-navigation">
        <div class="sidenavigation"><a>Navigation 01</a></div>
        <div class="sidenavigation"><a>Navigation 02</a></div>
        <div class="sidenavigation"><a>Super ---------- Super Super Super Long Navigation Test 01</a></div>
        <div class="sidenavigation"><a>Super ---------- Super Super Super Long Navigation Test 02</a></div>
    </div>
    <div class="clearfloats"></div>
</div>

CSS：

.page-content {
    width: 80%;
    margin: 0px auto;
    position: relative;
    border: 2px dashed #0F0;
}

.main-page {
    width: 74%;
    padding: 5px;
    margin: 0px auto;
    float: left;
    position: relative;
    border: 2px solid #F0F;
}
.clearfloats {
    clear: both;
}

Answer 2

只需将此添加到您的css :它将使您的html和身体采取100%的高度屏幕。

html {
        width: 100%;
        height: 100%;
        display: table;
    }

    body {
        width: 100%;
        display: table-cell;
    }

    html,
    body {
        margin: 0px;
        padding: 0px;
    }