如何讓寬度跟屏幕一樣寬，高度自己定？

如何讓寬度跟屏幕一樣寬，高度自己定？跪求！

SunQuan

2016-01-11

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

關(guān)注問題我要回答

1308

操作

收起

2 回答

炸豬排超人
2016-01-14

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

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

2、目標(biāo)元素是body 的直接子元素，或者目標(biāo)元素的父元素及以上都是寬度 100%

<!--?只寫出部分代碼，完整的html結(jié)構(gòu)可以自己補充?-->
<body>
????<div?id="target"?style="height:100px;">this?is?div</div>
</body>
<!--?這個id為target的元素，是div，它的display?默認(rèn)值是block，也就是寬度為?100%（根據(jù)父元素來的），所以，這個元素就不需要設(shè)置什么寬度，值需要設(shè)置高度就好了?-->

<body>
????<div?id="parent">
????????<div?id="target"?style="height:100px;">this?is?div</div>
????</div>
</body>
<!--?這個例子里面，div的display默認(rèn)屬性都是block，所以，寬度都是父元素的寬度，也就是說，?#parent的寬度是父元素body的寬度，#target的寬度是#parent的寬度，所以也不用設(shè)置什么寬度，直接設(shè)置你需要的高度就好了?-->

<body>
????<span?id="target"?style="display:block;height:100px;background:red;">123</span>
</body>
<!--?如果你用的不是display默認(rèn)值為block的元素（塊狀元素），那你就需要把這個元素轉(zhuǎn)為塊狀元素，這里的span默認(rèn)dislay值為inline，重置display為block，就可以設(shè)置高度了。inline元素，是既不能設(shè)置寬度，也不能設(shè)置高度的，里面有多少文本內(nèi)容，它就有多大，里面沒有文本內(nèi)容，在頁面上就看不到它，相當(dāng)于寬高都是0像素?-->