html - 超出屏幕的内容不显示？

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;
}

即使视口(viewport)很小，我也希望它显示全部内容，但如果视口(viewport)超出网页，我希望背景颜色能够填充该空间(左侧和右侧)。就像下图一样。但是当我从 .sitefeed 中删除宽度时，这是不可能的。

---

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

Answer 1

尝试将 overflow:hidden 从您的 HTML 样式中移除。