Add margin to 100% width element in IE7?_问答_开发者

Add margin to 100% width element in IE7?

开发者 https://www.devze.com 2022-12-21 12:53 出处：网络

In IE7 I\'d like to add some margin to a element that has 100% width of it\'s parent. But the element overflows it\'s parent. Somewhat logical, but what\'s a solution to this problem?

In IE7 I'd like to add some margin to a element that has 100% width of it's parent. But the element overflows it's parent. Somewhat logical, but what's a solution to this problem?

I added a simplified example, where the yellow div overflows it's green parent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><tit开发者_如何学Gole>Test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>

<div style="width: 500px; height: 200px; background-color: green;">
 <div style="width: 100%; height: 100%; margin: 10px ; background-color: yellow;">
  Test
 </div>
</div>

</body>
</html>

Thanks.

If you just remove the width: 100%; declaration you're all set:

<div style="width: 500px; height: 200px; background-color: green;">
 <div style="height: 100%; margin: 10px ; background-color: yellow;">
  Test
 </div>
</div>

The default behavior is to stretch to the full width of the container.