How set a page to maximum and minimum sizes via css

问题

I'm creating a page that looks like this:

Here is the code

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>

The CSS is available here:

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...

回答1:

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>

回答2:

I believe CSS Media Queries will resolve your problem.

Of course it is possibly just one of the solutions, but it is purely CSS and really easy to manage.

For more information about media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Using media queries happens like in this following example, where your #headLogo is set to change its properties once the viewport width is less or equal to 768px:

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

回答3:

updated fiddle

You don't actually need media queries for that

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

will make body occupy all available space in window. It will shrink and expand with window re-size.

来源：https://stackoverflow.com/questions/33209378/how-set-a-page-to-maximum-and-minimum-sizes-via-css

标签

css

responsive-design