In JSF, I am using panelGrid which is equivalent to table in html. How to set height=100% in it? width=100% exists but not height.
Thanks
To start, JSF is irrelevant here. It's now all about its generated HTML code. Open page in webbrowser, rightclick and view source. Concentrate you on that HTML source. That's all what CSS (and JS) can see and apply.
I assume that you mean with 100% height the full viewport height (the "visible" height). Now, to achieve full viewport height in CSS, only setting a height: 100% on the desired HTML element itself is not sufficient. It will be relative to its parent element, all the chain up to the <html> element. So if you basically have a:
<!DOCTYPE html>
<html lang="en">
<head>
<title>100% viewport height demo - FAIL</title>
<style>
.mytable { height: 100%; background: yellow; }
</style>
</head>
<body>
<table class="mytable"><tr><td>cell</td></tr></table>
</body>
</html>
It will be 100% of the height of the <body> element. The height of the <body> itself is in turn relative to the height of the <html> element. But the both elements doesn't have a height of 100%. Copy'n'paste'n'run it. You'll see, it does not cover the full viewport.
If you want to achieve a full viewport height, then you need to apply height: 100% on both the <body> and <html> elements as well (you of course also need to reset the margins).
<!DOCTYPE html>
<html lang="en">
<head>
<title>100% viewport height demo - GOOD</title>
<style>
html, body { margin: 0; height: 100%; }
.mytable { height: 100%; background: yellow; }
</style>
</head>
<body>
<table class="mytable"><tr><td>cell</td></tr></table>
</body>
</html>
Apply this knowledge on JSF as well. The h:panelGrid just renders a <table> element. Its styleClass will be rendered as HTML class attribute.
Related
Could you please advise how to divide the screen into two halves horizontally? Here is my attempt, but the height=100% kind of doesn't work. (I intend the whole screen to be covered) How can I make it work? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
.t7{width: 50%; height: 100%; background-color: #506970; }
</style>
</head>
<body>
<div class=t7>aaa</div>
<div class=t7>bbb</div>
</body>
</html>
Both the html and body tag should have their width and height properties set to 100%. By default the height won't be 100%, which is why these elements do not expand vertically. As a side note, you might also want to set the margin (specifically on the body) to zero.
Also, whitespace between elements can cause problems when you are trying to use up 100% of the width. And because you are using div elements, you will want to set their 'display' property to 'inline-block'. By default they use 'block', which causes a line break (effectively) after the element, so the two elements wouldn't be side-by-side.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
.t7{width: 50%; height: 100%; background-color: #506970; display: inline-block; }
</style>
</head>
<body>
<div class=t7>aaa</div><div class=t7>bbb</div>
</body>
</html>
In this case you can use vh units for the screen height.
vh – Relative to 1% of the height of the viewport.
Your code will look like that:
.html
<div class="top"></div>
<div class="bottom"></div>
.css
.top, .bottom {
height: 50vh;
}
As a result, the screen will be splitter in half horizontally.
In order for the CSS height property to work using percentages, the parent element must have a defined height. So to fix this, you must git the <body> a height of 100%. But in order for that to work, you must also give the <html> a height of 100%.
html, body { height: 100% }
Another option is to use the viewport width/height vw/vh measurement instead of percentage based measurement.
.t7 { width: 50vw; height: 100vh; ... }
I have a webpage where the background-color for the body fills the browser window when the content is short. At times the content may be large and fill the browser window. Is there any way of controlling the height of the body to fit the content? I have tried setting the height of the body to 100% and to auto but this does not help. Solutions that do not need Javascript are preferred. A minimal example is included:
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<title>Minimal Testcase for Body Height Sizing</title>
<style>
html, body {
height: 100%;
}
body {
background-color: #f7fad4;
color: #262626;
}
</style>
</head>
<body>
<h1>Test Heading</h1>
<p>Sample text</p>
</body>
</html>
When I set the height of the body to auto, the height is correctly reported by the Chrome development tools, but the background-color overflows and fills the browser window. So the question becomes, how to prevent overflow of the background-color.
`
Set HTML background-color to white.
html{
background-color: white;
}
CSS body background is designed to fill the whole viewport if html doesn't have any style applied to it.
Try setting the height of the html element aswell
html {
height: 100%;
}
body {
min-height: 100%;
}
In the below lines of html code, the div element extends to the entire height of the page.
Why does adding a <!DOCTYPE html> to it not make it take 100% height of the page? How can I get 100% height while also adding <!DOCTYPE html>?
<html lang="en">
<head>
<style type="text/css">
#menu {
background: green;
height: 100%;
width: 100px;
}
</style>
</head>
<body>
<div id="menu">
Menu
</div>
</body>
</html>
Add the following to your Styles section:
html, body {
height: 100%;
}
The reason your content is not taking 100% height is because it is inherited from its parent element when you use percentages. The parent of div#menu is body, and body has no inherent height. The parent of body is html, and html also has no inherent height. html's parent is the document/viewport itself, which does have inherent height of 100%.
I would also personally recommend that you use an external stylesheet for your CSS, instead.
I'm trying to make a list of slide divs that will have content within them, something quite similar to what the Foo Fighter's have going on, on their website: http://www.foofighters.com/us/discography
The main thing I'd like to figure out is how to have each "slide" auto-adjust to be the proper height when the browser is resized. You can check it out yourself on the discography page I linked. Is there a way to accomplish this? I'm assuming it would be a javascript/jquery thing.
It's important to know that to have a 100% height on a block element, all of the parents must also be set to 100% height.
For example, my if html looks like this:
<!DOCTYPE html>
<html>
<body>
<div id="wrapper">
<div id="myDiv">This is my div!</div>
</div>
</body>
</html>
The CSS required to make myDiv 100% height would be
<style type="text/css">
html, body, #wrapper, #myDiv { height: 100%; }
</style>
Notice all of the parents of #myDiv are also set to 100% height. This is the key to achieving 100% dynamic height for block elements.
An example of getting a div to resize to browser window height:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
background-color: black;
margin: 0;
padding: 0;
}
#mydiv {
height: 100%;
width: 400px;
background-color: white;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="mydiv">TEST</div>
</body>
</html>
Tested in Chrome, IE9, Firefox and Opera, all running on Windows. IE9 required the DOCTYPE to be specified in order to work correctly, the other browsers didn't seem to care.
JQuery alternative: Set DIV height dynamically based on viewport height
I've got a really frustrating problem with a web application I work on (I didn't originally write it). It uses frames for the layout scarily enough. The problem I'm having is that all elements with a background colour and border set via CSS default to 100% width. I've just tested div elements, paragraph elements etc.
I removed the stylesheet completely and then tested it and I had the same problem, so it's not the stylesheet causing the problem.
I wrote a quick test to make sure it wasn't conflicting code and used the same doctype and xmlns as ours - I get the same problem. Here's the example code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#test {
border:1px solid #ccc;
background-color:#ddd;
}
</style>
</head>
<body>
<div id="test">
Test information!
</div>
</body>
</html>
Any ideas?
I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.
(FF has the same behaviour.)
It's not because the element has a background or a border that it expands to the full with of the parent, it's because it's a block element. The background or border just makes you see how large the element really is.
The default width is actually not "100%", but "auto". The practical difference is that the element including borders uses 100% of the width, instead of the width excluding the borders becoming 100% of the width (making the width including borders wider than it's parent).
If you don't want the element to use the available width you can make it a floating element. Then it will adjust itself to it's content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#test1 {
float: left;
border:1px solid #ccc;
background-color: #ddd;
}
#test2 {
float: left;
clear: both;
border:1px solid #000;
background-color: #ccf;
}
</style>
</head>
<body>
<div id="test1">
Test information!
</div>
<div id="test2">
Test information!
</div>
</body>
</html>
As Richard and BeefTurkey say, divs are block elements and will fill the width of the browser.
You can either use an inline element, such as a span
<span id="test">
Test information!
</span>
or add some style to your div to force it to be inline
div#test { display: inline; }
Don't divs default to 100% (of parents size) because they're blocks? You could always try changing display to inline: #test {display:inline;}