仅针对无法正常工作的特定 div 溢出答案

【问题标题】：overflow only for particular divs not working仅针对无法正常工作的特定 div 溢出
【发布时间】：2016-03-26 12:23:53
【问题描述】：

我正在尝试制作一个 Cms，容器高度为 100%，并且隐藏了整体溢出，仅针对“侧面导航”和“工作区”溢出，自动高度相同，请帮助，请查看附图

// HTML and CSS BELOW
    <?php
    echo '<!DOCTYPE html>';
    echo '<html>';
    echo '<head>';
    echo '</head>';
    echo '<body>';
    echo '<div id = "main_container">';
    echo '<div id = "top_1">';
    echo '<div id = "header_1">';
    echo '<div id = "header_1_a">';
    echo "logo";
    echo '</div>';
    echo '<div id = "header_1_b">';
    echo "name";
    echo '</div>';
    echo '</div>';
    echo '<div id = "header_2">';
    echo '<div id = "header_2_a">';
    echo "person name";
    echo '</div>';
    echo '<div id = "header_2_b">';
    echo '</div>';
    echo '</div>';
    echo '<div id = "header_3">';
    echo '<div id = "header_3_a">';
    echo "address";
    echo '</div>';
    echo '<div id = "header_3_b">';
    echo '</div>';
    echo '</div>';
    echo '</div>';
    echo '<div id = "content_1">';
    echo '<div id = "content_1_a" >';
    echo '<div id = "side_nav_1" >';
    echo '<div id = "side_nav_1_a" >';
    echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  
    echo '</div>';
    echo '</div>';
    echo '<div id = "work_area_1">';
    echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  echo 'hello world <br />';  
    echo '</div>';
    echo '</div>';
    echo '</div>';
    echo '<div id = "footer_1">';
    echo '<div id = "footer_1_a">';
    echo '<div id = "copyr_1_a">';
    echo "HELLO";
    echo '</div>';
    echo '<div id = "copyr_1_b">';
    echo "WORLD";
    echo '</div>';
    echo '</div>';
    echo '</div>';
    ?>


    body,html {
        margin : 0;
        padding : 0;
        overflow : hidden;
    }
    #main_container{
        background : orange;
        width : 100%;
        height : 100%;
        position : absolute;
        top: 0;
        bottom: 0;
    }
    #top_1{
        display : table;
        width : 100%;
        height : auto;
    }
    #header_1{
        background : #FFA500;
        display : table-row;
    }
    #header_1 #header_1_a{
        display : table-cell;
    }
    #header_1 #header_1_b{
        display : table-cell;
    }
    #header_2{
        background : #55595B;
        display : table-row;
        color : white;
    }
    #header_2 #header_2_a{
        display : table-cell;
    }
    #header_2 #header_2_b{
        display : table-cell;
    }
    #header_3{
        background : #F1F1F1;
        display : table-row;
        color : white;
    }
    #header_3 #header_3_a{
        display : table-cell;
    }
    #header_3 #header_3_b{
        display : table-cell;
    }
    #content_1{
        display : table;
        width : 100%;
    }
    #content_1_a{
        display : table-row;
        background : gray;
        width : 100%; 
    }
    #side_nav_1{
        display : table-cell;
        background : gray;
        width : 20;
    }
    #side_nav_1_a{
        height : auto;
        overflow : auto;
    }
    #work_area_1{
        display :table-cell;
        background : white;
        width : auto;
    }
    #work_area_1_a{
        height : auto;
        overflow : auto;
    }
    #footer_1{
        background : red;
        display : table;
        width : 100%;
        height : auto;
    }
    #footer_1_a{
        display : table-row;
        background : red;
    }
    #copyr_1_a{
        display : table-cell;
        background : red;
    }
    #copyr_1_b{
        display : table-cell;
        background : red;
    }

【问题讨论】：

标签： css height overflow

【解决方案1】：

你好，

为什么你对所有的 HTML 都使用 echo ？使用类而不是 id，如果你有很多文章，或者用户在后退中，你不会像“user_1，user_2，user_3”等那样使用 id，并考虑命名法（看 css）。提示：你有 100vh（视口高度）而不是 100%。

我添加了重置 CSS、jQuery 来检查页眉和页脚的高度，并在内容中添加填充，我使用 while 来显示“Hello world”。

如果你想做一个 CMS，打好基础真的很重要，想想 6 个月后，如果你有 2 ou 更多的时间来开发代码！

HTML / PHP：

<div id="main_container">
    <div class="header">
        <div class="header-logo" class="clearfix">
            <div class="header-logo-img">Logo</div>
            <div class="header-logo-name">Name</div>
        </div>
        <div class="header-person" class="clearfix">
            <div class="header-person-name">Person name</div>
            <div class="header-person-info"></div>
        </div>
        <div class="header-info" class="clearfix">
            <div class="header-info-adress">Address</div>
            <div class="header-info-phone"></div>
        </div>
    </div>
    <div class="content">
        <div class="content-side-nav">
            <?php $i = 1;
            while($i <= 20) {
                echo '<p>hello world</p>';
                $i++;
            } ?> 
        </div>
        <div class="content-work">
            <?php $i2 = 1;
            while($i2 <= 200) {
                echo '<p>hello world</p>';
                $i2++;
            } ?>
        </div>
    </div>
    <div class="footer">
        <div class="footer-copyright">HELLO</div>
        <div class="footer-copyright">WORLD</div>
    </div>
</div>

CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
#main_container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: orange;
}
.header {
    position: fixed; /* or Absolute */
    top: 0;
    width: 100%;
    z-index: 10;
}
.header-logo, .header-person, .header-info {
    display: block;
    background: #FFA500;
    color: white;
}
.header-logo-img, .header-logo-name, .header-person-name, .header-person-info, .header-info-adress, .header-info-phone {
    display: block;
    float: left;
    width: 50%;
}
.header-personn { background: #55595B; }
.header-info { background: #F1F1F1; }
.content {
    position: relative;
    padding: 48px 0 32px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}
.content-side-nav {
    float: left;
    width: 20%;
    height: 100%;
    overflow: scroll;
    background: gray;
}
.content-work {
    float: left;
    width: 80%;
    height: 100%;
    overflow: scroll;
    background: white;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: red;
}
.footer-copyright {
    float: left;
    width: 50%;
    background: red;
}

JS：

$(document).ready(function() {
    var headerH = $(".header").height(),
        footerH = $(".footer").height();
    $(".content").css({
        "padding-top": headerH,
        "padding-bottom": footerH,
    });
});

希望对你有帮助。

【讨论】：