-->

100% width non-responsive HTML layout collapse whe

2019-09-03 05:51发布

问题:

How to avoid 100% width non-responsive HTML layout collapse when window resize? I tried by removing viewport meta tag but not working..

回答1:

just give your body or a container div a set width or min width

<body>
<div style="min-width:1024px;" >
//put the rest of your html in here
</div>
</body>


回答2:

Assign a width or max-width in your CSS. For example:

<body>
    <div id="myContent">Stuff</div>
</body>

then in your CSS:

#myContent {
    margin:0 auto;
    max-width:1024px;
}

The margin property will apply a top and bottom margin of 0, then automatically center the div with auto. If the browser screen is wider than 1024px, the webpage will not get any larger but will sit in the center of the browser. If it is below 2014, the width will stick to 100% and the content will wrap to fit on the screen.

If your site needs to work in IE6, be sure to specify width instead of max-width, as IE6 doesn't recognise max-width and will just ignore it altogether. You can place this either in an IE-only stylesheet.