超出屏幕的内容不显示？

Question

我在这里做错了什么，但是我无法理解它是什么。我的代码有问题吗？每当我尝试使屏幕尺寸变小时，内容必须固定到一定宽度，但它会自行调整，并且不会显示任何内容。这里是jsFiddle，下面是错误的图像。

HTML

<div class="sitefeed">
    <!-- this is the start of site -->
    <header>
        <div class="wrap head-rel">
            <ul class="nav">
                <li><a href="">Home</a>
                </li>
                <li><a href="">Contact</a>
                </li>
                <li><a href="">Services</a>
                </li>
            </ul>
            <ul class="logo">
                    <h1>Naveen Niraula</h1>

            </ul>
        </div>
    </header>
    <div id="main">
        <article>
            <div class="wrap">
                    <h1>This</h1>

                <p>My dear has kinda some typo somewhere.</p>
            </div>
        </article>
    </div>
    <!-- and here is the end -->
</div>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: consolas;
}
html {
    height: 100%;
    overflow: hidden;
}
body {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.sitefeed {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}
.wrap {
    max-width: 901px;
    min-width: 900px;
    margin: auto;
    padding: 0 5px;
}
/* ------------- header here ------------------- */
 header ::-moz-selection {
    color: #6cccf2;
}
header ::selection {
    color: #6cccf2;
}
.head-rel {
    position: relative;
}
header {
    background: #3b5998;
    color: #fff;
}
/* ----------- navigation goes right here ---------------- */
 .nav {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    right: 0;
}
.nav li {
    display: inline-block;
}
.nav li a {
    text-decoration: none;
    color: #fff;
    padding: 10px;
    display: block;
}
.nav li:hover {
    background: #000;
}
.nav li a:hover {
    color: #fff;
}
/* ------------------------ main content goes here ------------------------ */
 #main ::-moz-selection {
    color: #a0249c;
}
#main ::selection {
    color: #a0249c;
}
#main {
    background: #e1e1e1;
}

我希望它显示整个内容，即使视口很小但如果视口超出网页我想要测量背景颜色以填充该空间（左和右）。如下图所示。但是当我从.sitefeed移除宽度时，这是不可能的。

---

解决。
似乎table-layout:fixed;导致问题，但现在我修复了它！

Answer 1

尝试从您的HTML样式中取出overflow:hidden。

Answer 2

如果我理解你的问题，你不需要以下代码：

.sitefeed { width: 100% }

如果删除此宽度，无论视图是否在视口之外，都会获得整个布局的背景。如果不与float一起使用，则块元素（display：block）将始终采用尽可能宽的宽度。我猜他们对于display：table也是如此。这将只占视口的100％，从而在其他内容溢出的位置切割背景颜色。

这是一个更新的jsFiddle：https://jsfiddle.net/nkwxw9gj/3/你想实现这个目标吗？

注意：它从视口溢出的原因是你在.wrap-rule中使用min-width：900px。如果您不想为合理的分辨率溢出，请更改。

Answer 3

在这种情况下，当您使用固定宽度时，只需将其添加到header和#main，它们都是具有固定宽度的.wrap的父级。

header, #main {width: 900px;}

http://jsfiddle.net/cj9pvz5o/