A seemingly trivial problem.
I have a very basic page in Visual Studio 2010. It’s got a master page…
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
</div>
</form>
</body>
…with…
<div class="divStretch" />
…alone in the content.
CSS is:
body, form, html
{
background-color: Black;
height: 100%;
}
body
{
margin: auto;
}
.divStretch
{
background-color: Red;
height: 100%;
}
Now with the <div> tags around the ContentPlaceHolder, the whole page is black. That is, the content div doesn’t show up. Without the <div> tags, red’s everywhere and the height of the content div is about twice as high as the window height, causing a vertical scrollbar to appear.
All I’d like is for the content div to exactly fill the window.
Because I am new here, I am not allowed to add comments to your question – sorry about that! I’ll try my best at answering your question and will assume some things. I’ll edit the answer if I’m wrong on the assumptions.
I’m assuming that by the “content div” you mention towards the end, you are referring to the div that’s inside the form, and when you say you’d like it to exactly fill the window you’re referring to the height (if you’d like to fill the width in this example, just add width: 100%)
What I’ve come up with: http://jsfiddle.net/trev/3xuzZ/
I’ve used the following CSS:
body { margin: 0px; padding: 0px; background: black; } .contentDiv { position: fixed; top: 0px; bottom: 0px; background: red; }And the following HTML:
This will take over the entire browser window though, covering any other elements you may have on the page and I’m not sure if that’s what you wanted.