如何让宽度跟屏幕一样宽，高度自己定？

如何让宽度跟屏幕一样宽，高度自己定？跪求！

SunQuan

2016-01-11

源自：全屏切换效果 1-2

关注问题我要回答

1218

操作

收起

2 回答

炸猪排超人
2016-01-14

1、去掉 html 、body 的 padding 和 margin，

html, body{ 
    padding:0;
    margin:0
}

2、目标元素是body 的直接子元素，或者目标元素的父元素及以上都是宽度 100%

<!-- 只写出部分代码，完整的html结构可以自己补充 -->
<body>
    <div id="target" style="height:100px;">this is div</div>
</body>
<!-- 这个id为target的元素，是div，它的display 默认值是block，也就是宽度为 100%（根据父元素来的），所以，这个元素就不需要设置什么宽度，值需要设置高度就好了 -->

<body>
    <div id="parent">
        <div id="target" style="height:100px;">this is div</div>
    </div>
</body>
<!-- 这个例子里面，div的display默认属性都是block，所以，宽度都是父元素的宽度，也就是说， #parent的宽度是父元素body的宽度，#target的宽度是#parent的宽度，所以也不用设置什么宽度，直接设置你需要的高度就好了 -->

<body>
    <span id="target" style="display:block;height:100px;background:red;">123</span>
</body>
<!-- 如果你用的不是display默认值为block的元素（块状元素），那你就需要把这个元素转为块状元素，这里的span默认dislay值为inline，重置display为block，就可以设置高度了。inline元素，是既不能设置宽度，也不能设置高度的，里面有多少文本内容，它就有多大，里面没有文本内容，在页面上就看不到它，相当于宽高都是0像素 -->