Min-width,min-height,overflow, moving side

1, sometimes we do not know the middle content area is how high, but want to let the height of the area just can drop the middle content area, this time we can use Min-height or height: auto;

Min-width inherits the width of the parent element, and Min-height does not.

2, <div style= "width:100%; height:20px; Background: #f00; min-width:800px; " ></div>

This div is full screen, the browser does not produce scroll bars, but when you narrow the width of the browser to 800 pixels, the div will not shrink again, and the browser will produce a scroll bar

3, overflow

value	Description
Visible	The default value. The content is not trimmed and is rendered outside the element box.
Hidden	The content is trimmed and the rest is not visible.
Scroll	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto	If the content is trimmed, the browser displays scroll bars to see the rest of the content.
Inherit	Specifies that the value of the overflow property should be inherited from the parent element.

4. CSS part:

Body {
    Overflow-x: Hidden;
   Overflow:inherit;
    Color: #333;
    Font-family: "Microsoft Jas Black", Helvetica, "blackbody", Arial,tahoma;
   max-width:640px;
   min-width:320px;
   margin:0 Auto;
   position:relative;
   Background: #fff;
   Font-size:0.20rem;
}

Other parts are made in rem units. For example: Width:1rem;
HTML section:

<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<title> Medical Man-web</title>

<!--Bootstrap--
<link href= "Css/bootstrap.min.css" rel= "stylesheet" >
<link rel= "stylesheet" href= "Css/style.css" >

<script type= "Text/javascript" >

HTML root font calculation should be placed on the front, so that the calculation will not have an error/
2016.3.23 WJQ Update The reason is to add a judgment to return a 20.5, because when the user in Google and other browsers directly enter the mobile site URL, if the user set the module custom style height is relatively small, because this time the clientwidth is 1920px, and the return _htmlfontsize is 40, This will make the module too small to show incomplete, so first take a more accurate value to show. Mobi.resethtmlfontsize () By the way also added
var _htmlfontsize = (function () {
var clientwidth = document.documentelement? Document.documentElement.clientWidth:document.body.clientWidth;
if (ClientWidth > 640) clientwidth = 640;
Document.documentElement.style.fontSize = clientwidth * 1/6.4+ "px";
return clientwidth * 1/6.4;
})();
</script>

Min-width,min-height,overflow, moving side