I've encountered a common issue that is slightly different from others I've come across. Despite my best efforts, I have been unable to find a solution on my own. If anyone could offer me some guidance on this, I would greatly appreciate it.
The problem lies in having a #wrapper div that spans 100% width and height of the browser. This part works fine. However, within this #wrapper, I need a #content div that automatically adjusts its size with the parent div while maintaining a 30px margin around it. I've come close to achieving this, but I am struggling to make the #content div stretch in height. Here's an example of what I'm attempting:
Below is the CSS code I am currently using:
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
cursor: default;
}
#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
position: absolute;
background: #333;
text-align: center;
}
#content {
/*width: 100%;*/
min-height: 100%;
height: auto !important;
margin: 30px;
overflow: hidden;
background: #ccc;
}
Here is the corresponding HTML code:
<body>
<div id="wrapper">
<div id="content">
This DIV should stretch to 100% height of its parent and body
minus the 30px margin around it and resize as the window is resized.<br />
It's working in width but not in height!<br /><br />
Anything placed inside this div (a child div) regardless of its size should not exceed the boundaries of this div (as the Overflow property is set to "hidden")!
</div>
</div>
</body>
In both Chrome and IE, I'm encountering the following issue:
If anyone has any insights or suggestions on how to resolve this issue, please let me know. Could it be possible to achieve what I desire, or am I overlooking something obvious?
Thank you in advance, LM