CSS Horizo​​ntal Page Squashing

Question

基本上我只是想让它成为这个网站

没有链接

当您使页面小于已定义的元素时，

不会被压扁。但是，为了明显的设计问题，我希望元素保持与它们完全相同的大小。因此我需要一个简单的水平滚动条或其他东西，但是当我搞砸了这样的设计时，似乎并没有太大的区别。如果您需要任何编码，或有任何疑问......请随意提问。

如果您注意到在水平边距中缩小页面时，侧边栏会被推入主要内容中。这是主要问题之一，我认为指出它是个好主意。只是为了表明问题的一部分。

ANSWER

#Wrapper{
overflow: auto;
z-index: 6;
min-height: 1400px;
width: 100%;
min-width:1400px; <--- Added that to make sure that the content never gets squashed.
}

Answer 1

您可以告诉您的侧边栏始终位于主容器旁边。要做到这一点，首先需要为这个div提供一个类名：

<div style="padding-bottom:15px;">
    <p align="center"><font size="+2">SITE UNDER CONSTRUCTION</font></p>
    ....
</div>

一旦你这样做，你需要把#Sidebar放在那个div中，得到这样的东西：

<div class="mycontentclass">

    <div id="Sidebar">
        <div style="margin-left:5px;">
            <a href="http://carnal.ueteribus.com/">Home</a><br>
            ...
        </div>
    </div>

    <p align="center"><font size="+2">SITE UNDER CONSTRUCTION</font></p>
    ....

</div>

然后在你的CSS样式中你需要添加：

.mycontentclass{
    padding-bottom: 15px; //This is the attribute you defined inline before setting a class for you div
    position: relative;
}

#Sidebar{
    position: absolute;
    left: -205px; //Sidebar width + gutter between the content
}

现在，您的菜单不会覆盖您的内容，它会始终紧随其后。

Answer 2

这是我用来解决问题的方法。

#Wrapper{
overflow: auto;
z-index: 6;
min-height: 1400px;
width: 100%;
min-width:1400px; <--- Added that to make sure that the content never gets squashed.
}