網頁布局:左邊為導航，右邊正文,左邊和右邊的高度總是相等,或者導航最低高度為屏幕高度

本文轉載自查看原文 2017-01-06 16:38 2417 Html

現在很多網頁的布局是左邊是導航，右邊是正文，這樣看起來簡單、大方，我們公司的網站就是這樣設計的，有兩種錯誤的布局如下：

圖一和圖二兩種都是錯誤的情況，圖一沒有給左邊導航設置高度，圖二給左邊設置了高度為屏幕的高度，當出現滾動條的時候，顯示的也很丑。

正確的情況應該是，左邊和右邊的高度總是相等

代碼如下：

<div class="container">
    <div class="left">
        <div>1導航</div>
        <div>2導航</div>
        <div>3導航</div>
        <div>4導航</div>
    </div>
    <div class="right">
        <div>sss</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
    </div>
</div>
<style>
    body {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .container {
        overflow: hidden;
    }
    .left {
        width: 20%;
        float: left;
        background-color: #e2e2e2;
        min-height: 100%;
        margin-bottom: -99999px;
        padding: 0 0 99999px;
    }
    .left div {
        border-bottom: 1px solid #ccc;
        color: #6f6f6f;
        display: block;
        padding: 20px 2px;
        text-decoration: none;
    }
    .right {
        width: 80%;
        float: left;

    }
    .right div {
        height: 100px;
        background-color: #ddd;
    }
</style>

或者需要左邊導航高度最少為屏幕的高度，只要給導航設置最小高度為100%，前提是它父親的高度為100%；

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="container">
    <div class="left">
        <div>1導航</div>
        <div>2導航</div>
        <div>3導航</div>
        <div>4導航</div>
    </div>
    <div class="right">
        <div>sss</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
    </div>
    <div></div>
</div>
</body>
<style>
    html, body {
        margin: 0;
        padding: 0;
        text-align: center;
        height: 100%;
    }
    .container {
        overflow: hidden;
        height: 100%;
    }
    .left {
        width: 20%;
        float: left;
        background-color: #e2e2e2;
        min-height: 100%;
        margin-bottom: -99999px;
        padding: 0 0 99999px;
    }
    .left div {
        border-bottom: 1px solid #ccc;
        color: #6f6f6f;
        display: block;
        padding: 20px 2px;
        text-decoration: none;
    }
    .right {
        width: 80%;
        float: left;

    }
    .right div {
        height: 100px;
        background-color: #ddd;
    }
</style>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css中如何實現左邊的高度隨着右邊改變而改變 Vue 實現左邊導航欄且右邊顯示具體內容（element-ui）左邊菜單，點擊左邊右邊內容改變 css布局------左邊寬度不定,右邊寬度自動填滿剩余空間左邊菜單，點擊左邊右邊內容改變 css布局，左邊的滾動時右邊不隨着滾動 css 關於兩欄布局，左邊固定，右邊自適應左邊定寬，右邊自適應布局的幾種方法 flex布局左邊固定，右邊自適應，右邊內容超出會影響布局 css布局，左邊的滾動時右邊不隨着滾動