Im a newbie to CSS and created this html file for my testing...but the results are not what I expected..
Here are my questions,
What would be the correct width of my IE window.
What would be the perfect height of my window..When I specify a value nothing changes.
I have created 3 divisions- Header, Footer and content..When I view it..there is a big space between each of these sections..Why do they occur?
Code follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
width:1400px;
height:1000px;
}
h1
{
color:orange;
text-align:center;
}
#div-1
{
background-color:red;
}
#div-2
{
background-color:Green;
}
#div-3
{
background-color:Blue;
}
</style>
</head>
<body>
<div id="div-1">
<h1>Header<h1>
</div>
<div id="div-2">
<h1>Content<h1>
</div>
<div id="div-3">
<h1>Footer<h1>
</div>
</body>
</html>
The width on your body tag should be set to "width: 100%;" This will cause the body tag to take up the entire width of the window, and your colored div sections will also stretch the full width.
You can set the height on the body tag to either "height: 100%;" or "height: auto;". Depends on what you are doing exactly.
The space is coming from your h1 tags you have inside each of those divs. They have a browser-defaulted margin set to them. If you set the css property to "margin: 0px" that should eliminate all that extra space.
First, you don't define the width or height of the window in CSS. It just doesn't happen. You may specify the width of particular elements on your page, but that is a slightly different matter. Remove your height and width properties.
Second, your divisions have spaces between them due to the default margins that are set on h1 tags. If you want to remove them, then set margin: 0 on your h1 in your CSS.
Third, you may want to check out this CSS tutorial at HTMLDog
Related
<div id="header">
<div>My</div>
<div>Header</div>
</div>
<div id="content"></div>
In the above markup, how can I get the content to fill the rest of the screen (no-scrolling)?
I know how to do this with absolute positions if the header was of a fixed height, but my header's height is dynamically set by its contents (so the site is responsive on mobile devices.)
Btw: I'm looking for a CSS only solution, because I think JavaScript is not made for this kind of task.
Thanks a lot,
The simpliest way is to draw the background in body and keep #content translucide. DEMO 1.
This way, you do not mind #header nor #content heights.
If you do not mind about IE7 and less, then display:table/table-row/table-cell taken from defaut display of HTML table elements can be what you need , in the case header has unknown height. DEMO 2
Your structure will need a bit of update in order to act as wished and to avoid gaps in layout render from header part to the content part.
If you reset display to be used as table properties, it will do so and can draw cols and rows.
Since it is only the row properties that will be usefull, Structure must be rendering as one single col and multiple rows.
Basic structure needs to turn this way :
<div id="header" class="row">
<div class="single">
<div>My</div>
<div>Header than can grow</div>
</div>
</div>
<div id="content" class="row">
<div class="single">
<p>My Content that will fill remaining space untill page has to scroll</p>
</div>
</div>
And basic CSS turns this way :
html, body {
height:100%;
width:100%;
margin:0;
}
body {
display:table;/* it will allow to grow over initial width specified */
/* table-layout:fixed; only if you want to control width within value specified*/
background:#edc;
}
.row {
display:table-row;/* we want these elements to stack on top of each other, not to become cells aside each other */
}
.single {
display:table-cell;/* this 'buffer' element is used to avoid layout to turn into multiple cols */
}
#content {
height:100%;/* since layout is the one taken from table properties, it means fill all space avalaible that #header doesn't use */
background:#cde;
}
In the case, *#header has a known*** height, it can be set in fixed or absolute position.
#content can be 100% height DEMO 3, better: min-height:100%; DEMO 4
display:flex could be useful too but for real young browser only :).
Example with display:flex;
html {
height:100%;
}
body {
margin:0;
min-height:100%;
background:#edc;
display:flex;
flex-direction:column;
}
#header {
/* nothing needed here */
}
#content {
flex:1;/* since it is the only one getting a flex attitude, it will fill up all space avalaible*/
background:yellow;
}
I'm trying to make 2 div's inside a container div (from Twitter Bootstrap) take the max height which is 100%.
I created a fiddle to demonstrate, but somehow it's not showing what I want.
Both div's are floated. And therefore I used class="clearfix". But that didn't work either. What am I missing?
EDIT
What you don't see in the fiddle, is that html and body are already set to 100% height in my application.
EDIT
The child div goes outside it's parent div, and that's why it keeps failing.
The jsfiddle has been updated. Anyone can take a look at it?
To make a nested block-level element take up 100% height even without any content inside of them, one needs to add height: 100%; to the element in question and all its parent elements (including html and body). See this demo.
Giving the divs a height works just fine, but because there is no content inside, the html and body elements don't stretch accordingly.
HTML:
<html>
<body>
<div class=container>
<div class=stretch-this>
</div>
</div>
</body>
</html>
CSS:
.stretch-this {
background-color: khaki;
}
html,
body,
.container,
.stretch-this {
height:100%;
}
I have 3 < div > elements stacked on top of each other on screen.
<div id="header"></div>
<div id="content" style="height:900px;width:1400px; "></div>
<div id="footer"></div>
I need to keep stated exact size of central DIV and I need 'header' and 'footer' to fill the space (remaining from 'content' height) on top and on the bottom equally, so all three DIVs would occupy exact window height.
Also I'd like header and footer have set some minimum height (so if screen becomes too small, these DIVs would keep some height, keep showing their contents, and scroller appears).
I can possibly do int in JS but CSS must be possible. Thanks in advance!
You can do it quite easily in JS with jQuery using the following javascript code:
var spaceHeight = $(window).height()-$("#content").height();
$("#header, #footer").css('height', spaceHeight/2);
You should put that code somewhere where you will make sure to call it in case the layout changes or in $(document).ready() if the page layout will be static.
And in order to preserve the minimum heights of #footer and #header use the min-height properties in CSS.
Here's and example: http://jsfiddle.net/4h5f8/17/
Try this code and see if it is what you need:
<html>
<head>
<style>
#header {
min-height:50px;
height:10%;
background-color:grey;
}
#content {
height:80%;
background-color:#EEEEEE;
}
#footer {
min-height:50px;
height:10%;
background-color:grey;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
With refrence to this question and the accepted answer, I tried doing something similar.
.Content
{
position:absolute;
top:0;
left:0;
padding-top:75px;
width:inherit;
height:inherit;
}
.Header
{
position:absolute;
top:0;
left:0;
height:75px;
width:inherit;
background-color:Blue;
text-align:center;
}
<form id="form1" runat="server" style="width:100%;height:100%">
<div id="Content" class="Content">
<div id="Header" class="Header">
<h1 style="color:White">Report Portal</h1>
</div>
</div>
</form>
I want the content area to fill the entire page, no more. But vertical scroll bars appear for the web page with the above html. How can I correct that?
You shouldn't make the header absolute also remove the padding-top: 75px.
Consider this fiddle: link
EDIT: Updated fiddle: link
Do you have width and height set to 100% on the body and hmtl?
Also, the padding is creating a vertical scrollbar, remove this and it will work as expected.
http://jsfiddle.net/Kyle_Sevenoaks/MqKXH/
You have put Height > inherit for "Content".
CSS Inheritance (http://dorward.me.uk/www/css/inheritance/)
CSS inheritance works on a property by property basis. When applied to an element in a document, a property with the value 'inherit' will use the same value as the parent element has for that property.
Overall, "Content" height is already 100% of the browser which is inherited from "form" tag. After adding padding from top ie "75px" ..its total height becomes "browser height + 75px". It reasons to scroll the page.
Solution :
1] Avoid the top padding to "Content". Give that padding to its inner container
2] use style
body, html{
overflow:hidden;
}
Hi,
I created a small popup with div of height and width 500px.Whenever I display it directly,It looks good.But When I put display:none by default and make it visible whenever I click the button,the popup is displayed with no height and width...Can anybody tel me the reason.....
<!DOCTYPE HTML>
<html>
<head>
<style>
div{
width:500px;
height:500px;
border:1px solid black;
background:#988858;
border-radius:14px;
box-shadow:5px 5px 10px #666633;
display:none;
}
</style>
</head>
<body>
<button class="button">Click</button>
<div id="Popup">
close
</div>
</body>
<script>
document.getElementsByClassName('button')[0].addEventListener('click',showPopup,false);
function showPopup(){
//document.getElementById('Popup').style.width=500+'px';
//document.getElementById('Popup').style.height=500+'px';
document.getElementById('Popup').style.display='inline';
}
function closePopup(){
document.getElementById('Popup').style.display='none';
}
</script>
</html>
Inline elements don't preserve width and height, you need to set the display to block.
document.getElementById('Popup').style.display='inline';
^^^^
display inline does not support the height and width so use block
display:inline doesn't support width and height. Try display:block.
Can not use initial and inline properties of display here. flex and inherit are more suitable (alignment is same as when div loads for first time). apart from that you can use inline-block, block and inline-flex. Try flex :)