if I write this in my css file.
html {
background: black;
}
the black color will cover my whole screen. But at that time, my html Element doesn't have a real height.The height property is 0.
For another HTMLElement like div,which must both has the real height and width properties that make the background-color works.
Why this difference between body, html and div?
I think,
html {
height: 100%;
width: 100%;
background: black;
}
is the only way to make the whole screen background color.
First of all there is no difference between html, body, or div element regarding their presentation.
like html and body, div height and width is not set to anything by default. If you don't set it yourself and if there is no content inside it, you won't be able to see its background color.
example:
.empty{
background-color: black;
}
.size-set{
height: 100px;
width: 100px;
background-color: green;
}
.content-div{
background-color: yellow;
}
<div class="empty"></div>
<div class="size-set"></div>
<div class="content-div">content is here</div>
I hope this will clear some of your doubts.
Related
I have the following HTML and CSS :
<div id="a">
</div>
#a {
width: 100%;
height: 700px;
background-color: orange;
}
jsfiddle :
https://jsfiddle.net/9zwsk6bb/
I would like the height to fill the total height exactly of the outer panel without using something like flexbox. Is it possible in this case?
Sure, but for that, you need to set the parent elements height, because when you want the element's height to be 100% of the parent, then 100% of what? So, you need to have something like
html,
body {
height: 100%;
}
#a {
width: 100%;
height: 100%;
background-color: orange;
}
<div id="a"></div>
Note that if you have a wrapper element for #a, then you need to set some height for that element as well.
Consider this jsbin.
I have this html:
<div class="container">
<span>
The lime outlined .container had two vertically stacked elements, this text (which is inline) and the salmon .fixed-width box which is block and has an explicit width and height set externally. I want .container to shrink to the size of .fixed-width and the inline content to wrap. I do not want to have to set an explicit width on .container.
</span>
<div>
<div class="fixed-width"></div>
</div>
</div>
and this css
.fixed-width {
background-color: salmon;
height: 200px;
width: 200px;
}
/*for debugging*/
.container { outline: 1px solid lime; }
.container * { outline: 1px solid blue; }
What I would like is for .container to be the same size as .fixed-width without explicitly setting it anywhere else, thereby making the inline text wrap and be no larger than 200px in width.
I'm pretty sure this isn't possible with css2 but my browser requirements are pretty modern (I'm using flexbox on the same page) so I'm hoping there's a way to do it with css3.
I'm open to introducing some new markup here if need be.
to shrink content on itself, <table> layout properties seems to be what you need.
Thanks so much for that question, showing up a behavior of the Blink Egine i did not noticed so far.
We can use these properties via CSS and , edit as noticed, for the Blink rendering engine used by Chrome/Opera, a work around is needed .
We need to use a width set to 0 on parent to shrink it as much as possible, since, no matter what, it takes 100% of its parent's width:
http://jsbin.com/UhOQEzOz/2/edit
.fixed-width {
background-color: salmon;
height: 200px;
width: 200px;
display:table;
table-layout:fixed;
}
.container {
outline: 1px solid lime;
display:table-row;
}
.container * {
outline: 1px solid blue;
}
article {
width:0;
}
http://jsbin.com/UhOQEzOz/2/edit
I'm aware that similar questions have been asked over and over, but I have yet to come across a solution that actually works for me. Picture the following problem.
Situation:
The body has a non-fixed background image that repeats both vertically and horizontally.
There is supposed to be a second transparent background image laid over the first.
Constraints:
The second background is supposed to stretch across the document, just like the background on the body. Mind: Not just the viewport, the entire document.
Even when the body height is smaller than the document height (i.e. no scrollbar), the second background must stretch to the bottom of the viewport (so any solution working with 100% html and/or body height is out of the question).
The second background's position cannot be fixed, because that would cause some sort of parallax effect when scrolling. The illusion that both images are actually one must be upheld.
It is possible for the body to have margin and/or padding. Both backgrounds should cover the entire document regardless.
Using a second background image on the body ("background-image: url(), url();") is not an option for backward compatibility reasons.
No JavaScript.
No actually merging the two images into one, obviously. :)
I have brooded over this problem for a while now and have gotten to the conclusion that this is impossible using only HTML and CSS2. I'd very much like to be proven wrong.
You should place a background image for two separate which covers each the whole document :
<html>
<head>
<style>
.firstbackground {
position:absolute;
left:0;
top : 0;
width : 100%;
min-height : 100%;
background: url('first.png') repeat;
}
.secondbackground {
width : 100%;
min-height : 100%;
background:url('second.png'); /* may be transparent, but why add a background then ;-) */
}
</style>
</head>
<body>
<div class="firstbackground">
<div class="secondbackground">
long content
</div>
</div>
</body>
</html>
CSS3 allows multiple backgrounds that are separated by commas, for eg:
background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
http://jsfiddle.net/hs2WT/1/
Just use multiple divs...
CSS:
html {
height: 100%;
}
body { height: 100%;}
.wrapper1 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/hixs_pattern_evolution.png');
}
.wrapper2 {
width: 100%;
height: 100%;
background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/yellow1.png');
}
.content { color: #fff; }
HTML:
<div class="wrapper1">
<div class="wrapper2">
<div class="content">
<p>Some Content</p>
</div>
</div>
</div>
let the secend background to have the position:absolute;
body{
background:url("http://jsfiddle.net/css/../img/logo.png") #000;
}
#secBg{
background:url("http://placehold.it/350x150") ;
position:absolute;
min-height:500%;
min-width:100%;
}
<html>
<body>
<div id="secBg">
</div>
</body>
</html>
http://jsfiddle.net/5sxWB/
This is my case:
http://jsfiddle.net/vZ4sB/
Is there a way that the H1 background color ocupies the whole width of the container MINUS the floated element width?
jsFiddle is temporarily down, but here's what I worked out:
HTML
<div class="container">
<h1>
<img src="my_img.jpg" />
<span>Here's my header!</span>
</h1>
</div>
CSS
.container {
border: 1px solid red;
height: 500px;
width: 500px;
}
h1 {
background: url(my_header_bg.jpg) top right no-repeat;
height: 30px;
}
h1 img {
float: left;
}
h1 span {
background: url(my_header_bg.jpg) top left no-repeat;
float: left;
line-height: 30px;
padding: 0 5px;
}
I'm shooting a little bit in the dark here, but I'm guessing you have a header with some text, a background image behind the text, and perhaps a logo to the left? Please let me know if I'm wrong.
This might need a little more tinkering, but what I did was float both the image and span (with text) in the H1 and set the height on the h1 to a static height. This way the span will always butt up against the image and the H1 will extend 100%. I set a left-aligned background image to the span. Then I set a right-aligned background image to the H1. If the background image is a seamless pattern of some sort, this will probably work. If it's an image with a static width, you can set the span to the width of the background image and fade it out to the H1.
If it's just blue, you can just keep the H1 background blue.
See if this fits what you're working with.
You could, if the width of the .floater element is static at 200px (plus 2px for borders) use an adjacent sibling selector to assign a margin-left to those h2 elements following a .floater:
.floater + h1 {
margin-left: 202px;
}
JS Fiddle.
Try with:
h1 {
background: blue;
overflow: hidden;
}
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?