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

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

这是密码

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 min width属性设置为800，但这使得默认宽度为100%

---

我认为身高很容易，只需要将身体设置为100%高度或100vh，但这似乎没有效果…

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

当然，它可能只是解决方案之一，但它纯粹是CSS，而且非常容易管理

有关媒体查询的更多信息：

使用媒体查询时，如以下示例所示，当视口宽度小于或等于768px时，您的

#headLogo

设置为更改其属性：

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

更新

你实际上不需要媒体查询

html,
body {
  width: 100%;
  height: 100%;
}

---

将使主体占据窗口中的所有可用空间。它将随着窗口大小的重新调整而收缩和扩展。

在整个页面中运行代码段，然后在缩小窗口大小后播放窗口大小。您的菜单将隐藏并显示一个按钮。现在点击按钮显示菜单

若您第一次运行代码段，那个么您可以看到按钮，因为您的 窗口大小<768px，若要查看菜单，请查看整页的结果

对于响应性站点，使用%的宽度，而不是px

您也可以使用引导来实现这一点

正文{
最小高度：50vh；
线高：1；
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
保证金：0；
填充：0；
}
.小按钮{
显示：无
}
#海德洛戈{
位置：绝对位置；
顶部：12px；
保证金：0自动；
字体大小：粗体；
}
#标题{
填充：0；
背景色：#1565C0；
宽度：100%；
高度：90px；
}
#标题.节{
保证金：0自动；
填充：0；
溢出：隐藏；
}
#标题.第ul节{
显示：内联块；
浮动：对；
保证金：0；
溢出：隐藏；
填充：50px 0 10px；
}
#标题.第ul li节{
显示：内联块；
浮动：左；
列表样式：无；
利润率：0.10px；
填充：0；
}
#标题.第a节{
颜色：#fff；
显示：内联块；
字体大小：15px；
高度：30px；
线高：30px；
保证金：0；
填充：0 8px；
文本对齐：居中；
文字装饰：无；
字体大小：粗体；
字母间距：0.03em；
}
#标题.第1部分：悬停{
背景：url（./images/headernavselected.gif）右上角不重复；
}
#标题。已选择ul li部分{
背景：url（./images/headernavselected.gif）右上角不重复；
}
#标题。第ul li.a节{
背景：url（./images/headernavselected.gif）不重复左上角；
颜色：#E3F2FD；
}
#身体{
利润率：0；
背景色：#DEDEDE；
宽度：100%
}
#页脚{
背景：1565C0；
保证金：0；
填充：0；
宽度：100%；
}
#页脚部分{
保证金：0自动；
填充：20px；
溢出：隐藏；
}
@介质（最大宽度：768px）
{
#标题.第ul节{
显示：无
}
.小按钮{
显示：块；
位置：绝对位置；
右：0；
顶部：32px；
}
#正文部分{
保证金：0自动；
溢出：隐藏；
背景色：#FFF；
宽度：500px；
高度：700px；
位置：相对位置；
}
}
@介质（最小宽度：768px）{
#正文部分{
保证金：0自动；
溢出：隐藏；
背景色：#FFF；
宽度：800px；
高度：700px；
位置：相对位置；
}
}

---












乱数假文
&抄袭；版权所有2023 |保留所有权利。

您是否查看了CSS媒体查询以允许不同屏幕/浏览器大小的不同CSS值？是否

html，正文{宽度：100%；高度：100%；填充：0；边距：0}

解决了您的问题？我更新了答案，如果我做错了什么，请告诉我。谢谢，但这会使页面始终保持100%的宽度。我希望页面锁定为800px宽（每边都有灰色边框），但内容宽度大于800或页面小于800的情况除外。@Xaz I更新了答案，您可以看到屏幕大小是否小于786，然后#主体部分是500px，带有灰色borer，如果屏幕大小大于786，则部分是800px。在这个例子中，页眉和页脚是不固定的，正文没有太多的内容，所以我硬编码了高度，如果您需要关于固定页眉和页脚以及正文部分的任何帮助，请告诉我，这会对您有所帮助：DThanks Keval，效果很好。如果页面内容较宽，有没有办法使“页面”（白色区域）变宽。例如，如果我输入**200个字符**（以模拟具有宽图像的页面），最右边的文本将被截断。相反，它应该加宽页面并添加滚动条（如有必要）@xaz您知道如何接受答案吗？：嗨，基瓦尔，是的，我知道，但我希望能完全解决我的问题。一个大问题是，我的许多页面不可避免地很宽（因为我有一个用户可以插入图片的论坛）。使用提供的解决方案，这些宽页面将被切断，用户无法滚动查看内容。CSS中没有解决这个问题的方法吗？这似乎不起作用。页面高度小于可用窗口高度（即底部有边框）。此外，宽度始终为100%。我希望页面锁定为800px宽（每边都有灰色边框），除非内容宽度大于800或页面小于800。

html,
body {
  width: 100%;
  height: 100%;
}