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

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

SunQuan

2016-01-11

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

關注問題我要回答

1287

操作

收起

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像素?-->