首页 > 代码库 > min-width,min-height,overflow,移动端

min-width,min-height,overflow,移动端

1、有些时候我们是不知道中间内容区域有多高的,但又想让该区域的高度恰好能放下中间内容区域,这个时候我们可以使用min-height或者height: auto;

min-width会继承父元素的width,而min-height不会。 

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

这个div是全屏的,浏览器不会产生滚动条,但是你把浏览器宽度缩小到800像素的时候,这个div不会再缩小,而浏览器就会产生滚动条

3、overflow
描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

 

4、css部分:
body {
overflow-x: hidden;
overflow:inherit;
color: #333;
font-family: "微软雅黑",Helvetica,"黑体",Arial,Tahoma;
max-width:640px;
min-width:320px;
margin:0 auto;
position:relative;
background:#fff;
font-size:0.20rem ;
}
其他部分用rem做单位。例如:width:1rem;
html部分:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>医药人-web</title>

<!-- Bootstrap -->
<link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.mamicode.com/css/style.css">

<script type="text/javascript">

//html root的字体计算应该放在最前面,这样计算就不会有误差了/
//2016.3.23 wjq update 之所以要加个判断返回一个20.5,是因为当用户在谷歌等浏览器直接输入手机端网站网址时,如果用户设置模块自定义样式的高度比较小,由于这时候的clientWidth为1920px,及返回的_htmlFontSize为40,这时候就会使模块太小,展示不完全,因此先取一个较为准确的值去展示。Mobi.resetHtmlFontSize()顺便也加了
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,移动端