I want to change the body height dynamically using css expression.. my code is
HTML
<body >
<div class="tall_top" >
</div>
</body>
CSS
body {
width: 100px;
height: expression(document.documentElement.clientHeight);
background: red;
}
.tall_top {
background:#f1f1f1;
width:50%;
height:50%
}
But It is not working in google chrome..... The inner div is not displaying. The height of body displaying in inspect element is 0px;
JS Fiddle
http://jsfiddle.net/3x6fh/
div.tall_top does not show up because your body,html does not have a height.
Set the height to 100%
html,body {
margin:0;
width:100%;
height:100%;
background:blue;
}
Demo: http://jsfiddle.net/codef0rmer/3x6fh/2/
css expressions is not worth learning any more. use JavaScript or css media queries. and also it will create the browser compatibility issue since it is only supported only ever IE6/7 (maybe) 5.
High Performance Web Sites: Rule – Avoid CSS Expressions
Your expression essentially evaluates to the height of the window, which is usually the height of the <html> element.
Adding this CSS should work:
html, body {
height: 100%;
}
Related
I have very little experience with html, css, etc so probably this looks like a stupid question to those that are used to create web pages.
But I cannot manage to set the background color of the entire window.
I mean the browser's window.
For example: imgur
What I've already tried is setting the background color of the body with, of course, no success.
Any help/link would be appreciated.
EDIT:
Probably, due to my English, I cannot explain what I mean. I'll try again.
In the link I've posted, the web page is in the center of the screen (as 99% of the web sites).
This is the body, isn't it ?
No problems in changing the bg color of it so please stop posting obvious answers.
I need to change the bg color of the columns at the right and left side of the body, as in the link I've posted.
So, I guess there's a way to set a color/texture of the entire window, not only the body.
Setting the background-color of the body element should work. If you have uncolored parts on the sides, set margin and padding to 0 as well. You might also have another element with a background color that is overlapping the body element and that is why you don't see the color.
body {
background-color: red;
}
<html>
<body>
</body>
</html>
You can use the background-color tag, which can be read about more in-depth at W3C http://www.w3schools.com/cssref/pr_background-color.asp
An example use of this would be the following:
CSS:
body{
background-color: red;
}
HTML:
<body style = "background-color: red;">
marco -
The body background of the page is a solid color, but they do apply an image (texture) to div elements on the page. I think this is what you are trying to duplicate. See the css in the example below, especially the background: url(); The texture they use is very subtle and not easy to see on my screen.
image url:
http://s.imgur.com/images/main-bg.png
You can inspect the site yourself using the developer tools of your browser (usually press F12) and looking at the styles applied to the page.
This is the actual style from the page:
#fullbleed-bg {
width: 100%;
min-width: 1000px;
height: 429px;
position: absolute;
top: 50px;
background: url("//s.imgur.com/images/main-bg.png") no-repeat scroll center top transparent;
max-width: 100%;
overflow-x: hidden;
}
Run the snippet to view:
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 200px;
background-image: url("//s.imgur.com/images/main-bg.png")
}
</style>
</head>
<body>
</body>
</html>
Here is fiddle how to change body
<body>
<div>
some text
</div>
</body>
body{
background-color:yellow;
height:100px;
}
div{
background-color:red;
}
You can use the color name or hex/RGB value to set the style directly on the body tag
<body style="background-color=red">
Use the html selector in your external stylesheet, as so:
html {
background-color: red;
}
This is an age old question, although I wasn't able to find a solution that suited me.
Given a DIV inside a table cell (TD), I want to fill the DIV's height to fit the TD
+-----------+
| TD |
|+---------+|
|| DIV ||
|+---------+|
| |
+-----------+
Only gotchas are:
I don't want to set the height of the parent TD
I want to avoid using Javascript (prefer a CSS only solution)
Keep the resizable nature of the contenteditable DIV
Bonus: get it to work in IE8+ (cross browser solution)
Bonus: use display:flex; - I couldn't work this out, but looks like it should do the trick.
Too much to ask?
Example:
Get the "foo" DIV, to fill 100% height of their parent TD. I got something close to working, but having padding on the DIV element, throws out the borders (using Opera).
/* My Attempt: close, but the padding throws out the borders */
div{
display:inline-block;
height:100%;
width:100%;
}
http://jsfiddle.net/nickg1/g5cpQ/5/
Thanks!
yes, as per you terms and conditions, display:table is the best solution for you.
Add css like this :
div{
display:table;
height: 100%;
border:1px solid red;
}
Check following link for
LIVE DEMO
Try the following:
table {
height: 1px;
}
td {
vertical-align: top;
height: 100%;
}
div{
border:1px solid red;
padding: 2px 4px;
box-sizing: border-box;
}
/* My Attempt: close, but the padding throws out the borders */
div{
display:block;
height: 100%;
}
See demo: http://jsfiddle.net/audetwebdesign/AkjND/
The trick is to specify a height on the table, any small value will do the trick.
If you want to apply vertical padding to the inner div, you need to use box-sizing: border-box, which may work as far back as IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I am looking for a way to create a div with height and width of the current browser window size.
This should work even if the window is re-sized.
The fullscreen div shall be followed by even more content.
I am using Bootstrap3 - But I am not sure if this changes anything.
It is pretty easy to get this working in Firefox/Chrome/IE
.fullscreen {
min-height: 100%;
min-height: 100vh;
height: 100%;
width: 100%;
width: 100vw;
height: 100vh;
}
This does not work on Safari.
So I came up with some js
$('.fullscreen').css({
width: $(window).width(),
height: $(window).height()
});
This works on all Browsers (At least all Browsers I've tested). Resizing the window does not work, as the width and height is fix. I could create a Listener that reacts on Window Size changes (I have not looked it up - but this should work).
I don't like the idea of using js to set css.
Isn't there a best practice? This should be possible using css only, shouldn't it? The solutions I've found on the web, were not satisfying.
Something like this?
You need to set the dimensions of both the viewport (html) and content (body) to 100%, then by giving a div a height and width of 100% it will be calculated relative to the viewport, giving the functionality you require (always filling it even on resize).
Feel free to ignore the huge parrot picture in the example, I added it because often in such layouts the first div includes a responsive image.
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%; /* <-- keep the div 100% of the viewport height */
width:100%; /* <-- keep the div 100% of the viewport width */
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
I want to change the sidebars on the following template to have fixed position.
Is it possible to do it without using javascript and only css?
Template Demo
PS: Placing position fixed for the sidebards it is not an option because its changing the whole structure of the site and they are placed outside of content area.
you wanna like this??http://jsfiddle.net/kFBuD/1447/
overflow:hidden;
You can using position:fixed
.sidebar1, .sidebar2 {
background: red;
height:100%;
width: 100px;
top:0;
padding-top:60px;
**position:fixed;**
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
you can use overflow property of HTML if you don't want it in CSS or JavaScript.
I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.
Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.
assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.
img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.
Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/
There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.