css - 如何通过 css 将页面设置为最大和最小尺寸

Question

我正在创建一个如下所示的页面:

这是代码

body { min-height: 50vh;
    line-height: 1;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#headlogo{
    position: absolute;
    top: 12px;
    margin: 0 auto;
    font-weight: bold;}
#header {
    padding: 0;
    background-color: #1565C0;
}
#header .section {
    margin: 0 auto;
    padding: 0;
    width: 900px;
    overflow: hidden;
}

#header .section ul {
    display: inline-block;
    float: right;
    margin: 0;
    overflow: hidden;
    padding: 50px 0 10px;
}
#header .section ul li {
    background: url(./images/headernav.gif) no-repeat top right;
    display: inline-block;
    float: left;
    list-style: none;
    margin: 0 10px;
    padding: 0;
}
#header .section ul li a {
    color: #fff;
    display: inline-block;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0 8px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.03em;
}
#header .section ul li a:hover {
    background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
    background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
    background: url(./images/headernavselected.gif) no-repeat top left;
    color: #E3F2FD;
}


#body {
    margin: 0 0;
    background-color:#DEDEDE;
}
#body .section {
    margin: 0 auto;
    min-width: 800px;
    width: 800px;
    overflow: hidden;
    background-color:#FFFFFF;
    padding: 60px 100px 50px 100px;
    min-height: 50vh
}
#footer {
    background: #1565C0;
    margin: 0;
    padding: 0;
}
#footer .section {
    margin: 0 auto ;
    padding: 20px;
    width: 800px;
    overflow: hidden;
};


<div id="header">
    <div class="section">

            <a href="index.html" id="headlogo"><img src="./images/headerlogo.png" width="340" height="110" alt="" title=""></a>
        <ul>
            <li class="selected">
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="about.html">Store</a>
            </li>
            <li>
                <a href="hairstyle.html">Products</a>
            </li>
            <li>
                <a href="news.html">Forum</a>
            </li>
            <li>
                <a href="contact.html">Support</a>
            </li>
        </ul>
    </div>
</div>


<div id="body">
    <div class="section">
    Lorem ipsum

</div>
</div>


<div id="footer">
    <div class="section">
            &copy; copyright 2023 | all rights reserved.
</div>

CSS 在这里可用:

http://jsfiddle.net/85L448ds/

但我不知道如何使页面对大小不一致的响应更快。 我希望页面默认为 800 像素宽，除非有宽内容或浏览器窗口太小(该区域外应该有灰色背景)。而高度应该是高度不应小于浏览器高度。

换句话说，我希望它能像这样工作:

Width = 800
If Width > Window_Width then
  Width = Window_Width 
If Content_Width > Width then
  Width = Content_Width 

而高度应该是 Content_Height 和 Windows_Height 中的较大者。

注意:无法预测 Content_Width/Height，因为我有一个论坛，其中的表格结构有时会过大以容纳大图像。

我试过将 CSS min-width 属性设置为 800，但这会使默认宽度变为 100%。

本来以为height会很简单，只需要将body设置为100%height或者100vh，但是好像没有效果。。。

Answer 1

我相信 CSS 媒体查询会解决您的问题。

当然这可能只是其中一种解决方案，但它是纯 CSS 并且非常易于管理。

有关媒体查询的更多信息: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

媒体查询的使用方式如下例所示，您的 #headLogo 设置为在视口(viewport)宽度小于或等于 768px 时更改其属性:

@media (max-width: 768px)
{
   #headLogo {
      text-align: center;
      max-width: 300px;
   }
}