如何通过 css 将页面设置为最大和最小尺寸 [英] How set a page to maximum and minimum sizes via css

查看：76
本文介绍了如何通过 css 将页面设置为最大和最小尺寸的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是代码

body { min-height: 50vh;行高:1；字体大小:14px；字体系列:Arial、Helvetica、sans-serif；边距:0；填充:0；}#headlogo{位置:绝对；顶部:12px；边距:0 自动；字体粗细:粗体；}#header {填充:0；背景色:#1565C0；}#header .section {边距:0 自动；填充:0；宽度:900px；溢出:隐藏；}#header .section ul {显示:内联块；浮动:对；边距:0；溢出:隐藏；填充:50px 0 10px；}#header .section ul li {背景: url(./images/headernav.gif) 无重复右上角；显示:内联块；向左飘浮;列表样式:无；边距:0 10px；填充:0；}#header .section ul li a {颜色:#fff;显示:内联块；字体大小:15px；高度:30px；行高:30px；边距:0；填充:0 8px；文本对齐:居中；文字装饰:无；字体粗细:粗体；字母间距:0.03em；}#header .section ul li a:hover {背景: url(./images/headernavselected.gif) 无重复右上角；}#header .section ul li.selected {背景: url(./images/headernavselected.gif) 无重复右上角；}#header .section ul li.selected a {背景: url(./images/headernavselected.gif) 无重复左上角；颜色:#E3F2FD；}#身体 {边距:0 0；背景颜色:#DEDEDE;}#body .section {边距:0 自动；最小宽度:800px；宽度:800px；溢出:隐藏；背景色:#FFFFFF；填充:60px 100px 50px 100px；最小高度:50vh}#页脚{背景:#1565C0；边距:0；填充:0；}#footer .section {边距:0 自动；填充:20px；宽度:800px；溢出:隐藏；};<div id="标题"><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">首页</a><li><a href="about.html">Store</a><li><a href="hairstyle.html">产品</a><li><a href="news.html">论坛</a><li><a href="contact.html">支持</a>

<div id="body"><div class="section">逻辑推理

<div id="页脚"><div class="section">&复制;版权所有 2023 |版权所有.

CSS 可在此处获得:

http://jsfiddle.net/85L448ds/

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

换句话说，我希望它像以下那样工作:

宽度 = 800如果宽度＞Window_Width 然后宽度 = Window_Width如果 Content_Width >然后宽度宽度 = Content_Width

而高度应该是以下两者中的较大者:Content_Height 和 Windows_Height.

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

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

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

解决方案

在整页中运行代码段，然后在缩小窗口大小后播放窗口大小，您的菜单将隐藏，您可以看到一个按钮.现在在按钮点击时显示菜单.

<块引用>

如果你第一次运行代码片段，你可以看到按钮，因为你的窗口大小是 <768px 如果您想查看菜单，请在整页中查看结果

对于响应式网站，使用 % 的宽度而不是 px.

你也可以使用引导程序.

body {最小高度:50vh；行高:1；字体大小:14px；字体系列:Arial、Helvetica、sans-serif；边距:0；填充:0；}.smallButton{显示:无}#headlogo {位置:绝对；顶部:12px；边距:0 自动；字体粗细:粗体；}#header {填充:0；背景色:#1565C0；宽度:100%；高度:90px；}#header .section {边距:0 自动；填充:0；溢出:隐藏；}#header .section ul {显示:内联块；浮动:对；边距:0；溢出:隐藏；填充:50px 0 10px；}#header .section ul li {显示:内联块；向左飘浮;列表样式:无；边距:0 10px；填充:0；}#header .section ul li a {颜色:#fff;显示:内联块；字体大小:15px；高度:30px；行高:30px；边距:0；填充:0 8px；文本对齐:居中；文字装饰:无；字体粗细:粗体；字母间距:0.03em；}#header .section ul li a:hover {背景: url(./images/headernavselected.gif) 无重复右上角；}#header .section ul li.selected {背景: url(./images/headernavselected.gif) 无重复右上角；}#header .section ul li.selected a {背景: url(./images/headernavselected.gif) 无重复左上角；颜色:#E3F2FD；}#身体 {边距:0 0；背景颜色:#DEDEDE；宽度:100%}#页脚{背景:#1565C0；边距:0；填充:0；宽度:100%；}#footer .section {边距:0 自动；填充:20px；溢出:隐藏；}@media(最大宽度:768px){#header .section ul {显示:无}.smallButton{显示:块；位置:绝对；右:0；顶部:32px；}#body .section {边距:0 自动；溢出:隐藏；背景颜色:#FFF；宽度:500px；高度:700px；位置:相对；}}@media(最小宽度:768px){#body .section {边距:0 自动；溢出:隐藏；背景颜色:#FFF；宽度:800px；高度:700px；位置:相对；}}

http://jsfiddle.net/85L448ds/

But I don't know how to make the page more responsive to sizing inconsistency. I want the page to default to 800 pixels wide, except where there is wide content or the browser window is too small (it should have a gray background outside this area). Whereas the height should be such that the height should not be less than the browser height.

In other words, I'd like it to work something like:

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

Whereas height should be the greater of: Content_Height and Windows_Height.

Note: Content_Width/Height cannot be predicted because I have a forum where the table structure is sometimes oversize to accomodate large images.

I've tried setting the CSS min-width property to 800, but that makes the default width 100%.

I thought height would be easy, just need to set the body to 100% height or 100vh, but that seems to have no effect...

解决方案

Run snippet in full page and then play with window size after reduce the size of window your menu will hide and one button you can see. now show menu on button click.

If you run snippet so at first time you can see button because your window size is < 768px if you want see menu then see result in full page

for responsive site use width in % not in px.

and you can also use bootstrap for that.

body {
  min-height: 50vh;
  line-height: 1;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
.smallButton{
     display:none
   
}
#headlogo {
  position: absolute;
  top: 12px;
  margin: 0 auto;
  font-weight: bold;
}
#header {
  padding: 0;
  background-color: #1565C0;
  width:100%;
  height: 90px;
}
#header .section {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
#header .section ul {
  display: inline-block;
  float: right;
  margin: 0;
  overflow: hidden;
  padding: 50px 0 10px;
}
#header .section ul li {
  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;
  width:100%
    
}

#footer {
  background: #1565C0;
  margin: 0;
  padding: 0;
  width:100%;
  
}
#footer .section {
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}
@media (max-width: 768px)
{
  #header .section ul {
      display:none
   }
  .smallButton{
    display:block;
     position: absolute;
    right: 0;
    top: 32px;
  }
  #body .section {
     margin: 0 auto;
    overflow: hidden;
    background-color: #FFF;
    width: 500px;
    height: 700px;
    position: relative;
}
}
@media (min-width: 768px){
  #body .section {
     margin: 0 auto;
    overflow: hidden;
    background-color: #FFF;
    width: 800px;
    height: 700px;
    position: relative;
}

}

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

    <a href="index.html" id="headlogo">
    </a>
    <button class="smallButton">---</button>
    <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 将页面设置为最大和最小尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆