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

时间：2015-10-19 08:01:12

标签： css responsive-design

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

page layout

这是代码

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，因为我有一个论坛，其中表格结构有时会超大以容纳大图像。

我尝试将CS​​S min-width属性设置为800，但这使得默认宽度为100％。

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

3 个答案:

答案 0 :(得分：1)

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

当然它可能只是其中一个解决方案，但它纯粹是CSS，非常容易管理。

有关媒体查询的详细信息： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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

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

答案 1 :(得分：0)

更新fiddle

您实际上不需要媒体查询

DataGridRow

会使身体占据窗口中的所有可用空间。它会随窗口重新缩小而缩小和扩展。

答案 2 :(得分：0)

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

  

如果您在第一次运行代码段时可以看到按钮，因为您的   窗口大小是＆lt; 768px如果你想看菜单，那么在整页看到结果

响应式网站使用宽度，以％而非px。

你也可以使用bootstrap。

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>

相关问题
最新问题