CSS：元素的复杂宽度规则

Question

I'll save you the explanation of exactly what it is, but is it possible to have an element that has the following:

If the screen is less that say 600px then the element will be width: 100%; If the screen is greater than 640px then the element has a variable width but with margins of 20px on the left and right. Between 600 and 640 px the margin goes from 20px to 0px. Ideally stepped so when the screen has a width of 620 the margin is down to 10px etc. In addition, when the screen is >1000px then the width remains fixed at that, and the element remains centred.

My css knowledge is basic. On their own I can implement any of those easily, but together? I'm looking at javascript solutions, but as a last ditch attempt at a nice solution I'm asking here.

Thanks

Mat

Answer 1

see: http://css-tricks.com/resolution-specific-stylesheets/

This is available for most modern browsers.

Answer 2

You have TWO options here.

Option 1 : Stick to a fixed width of 600px and let it automatically get centered.

To do this simply add the following line into your CSS for the outermost DIV tag:

margin: 0 auto;

Option 2 : This is to use JavaScript. You can first set the min-width property of the outermost DIV using CSS. Then let JavaScript do the conditional calculations.

Personally, I'd go for option 1.

Answer 3

Below is the CSS and HTML of a layout for a site I made a for my son's Baseball Team. The layout is similar to what you want.

CSS

/* page element and contents */
#page
{
    overflow:auto;
    height: 100%;
}
#centerContent
{
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 66%;
    min-height: 430px;
    min-width: 778px;
    margin: 0px auto;
    border-left-style: ridge;
    border-right-style: ridge;
    border-left-width: 5px;
    border-right-width: 5px;
    border-right-color: #f6e662;
    border-left-color: #f6e662;
}

#leftMargin
{
    position: absolute;
    overflow: hidden;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 17%;
    border-right-width: 5px;
    text-align: center;
}
#rightMargin
{
    position:absolute;
    overflow:hidden;
    right:0px;
    top:0px;
    height:100%;
    width:17%;
    border-left-width: 5px;
}

/* header element and contents */
#header
{
    overflow:hidden;
    background-color: #FFFFFF;
    border-bottom: solid 1px #053c01;
    height:75px;
    top: 0px;
    left: 0px;
}
/* main element and contents. */
#main 
{
    position:absolute;
    overflow:hidden;
    background-color: #FFFFFF;
    top: 76px;
    bottom: 25px;
    left: 0px;
    right: 0px;

}
/* footer element and contents */
#footer
{
    position:absolute;
    overflow: hidden;
    background-color: #FFFFFF;
    border-top: solid 1px #053c01;

    height: 25px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

HTML

<div id="page">
  <div id="leftMargin">
  </div>
  <div id="centerContent">
    <div id="header">
    </div>
    <div id="main">
    </div>
    <div id="footer">
    </div>
  </div>
  <div id="rightMargin">
  </div>
</div>

Answer 4

You can achieve that with media queries in modern browsers, just not in IE8 or earlier. So for example you'd have:

@media screen and (max-width:600px) {
    #divID {width:100%;}
}

Which says if the screen is under 600px wide, then the div with the id called divID has a width of 100%.

You can set conditions for an in between size like this:

media screen and (min-width: 601px) and (max-width:640px) {
    #divID {width:auto;}
}

And you can have a setting for widths over a certain size:

@media screen and (min-width: 601px) {
        #divID {width: 500px;}
}