I have built this little ap in angular and would like to the container element to stretch the full height of the page, when the content doesn't fill the height of the page for example on a large screen this page doesn't:
http://purepremier.com/#/teams/57
I tried setting it to
position: absolute;
top:0;
bottom:0;
height:100%
but when the content overflows then the height of the container only stretchs to the viewport height.
Any ideas? Or is theere a way in angular to add the class to the body instead?
Yep, simply
* {
margin: 0;
padding: 0;
}
.container {
min-height: 100vh;
background: red;
}
<div class="container">
</div>
JSfiddle Demo
Support for viewport units
Or for an alternative
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
min-height: 100%;
background: red;
}
<div class="container">
</div>
Absolute positioning is not the way to set full document height, but it sets to the viewport height. You can use fixed position instead:
#element{
position: fixed;
top:0;
bottom:0;
}
html, body {height:100%; min-height:100%; margin:0; padding:0;}
#full {background:red; height:100%;}
<div id='full'>hmm</div>
Related
HTML code:
<div id="container>
<div id="wrapper">Some text
</div>
</div>
CSS code:
div {
position:fixed;
display:block;
}
#container {
max-width:1500px;
height:10%;
}
#wrapper {
width:50%;
height:10%;
}
Now, my wrapper and container have the same size, although you would expect that the wrapper is half the height of the container, and one tenth the height of the container. Unfortunately, they are evenly big right now. Can someone please help me out?
You need to change max-width to width on #container to get the width right:
#container {
width: 1500px;
height: 10%;
}
And you need to remove position: fixed and set height on html, body to get the percent height to work:
html, body {
height: 100%;
}
div {
position: fixed;
display: block;
}
JSFiddle
(You're also missing an ending " in the container div, but I assumed that was a typo)
#container {
display:block;
position:fixed;
width:100%;
height:10%;
background-color: blue;
}
#wrapper {
display:block;
position:relative;
width:50%;
height:100%;
background-color: red;
}
I'm looking for a way to create a div that has a relative size, adjusted to the browser's height. Problem is that I dont really know where to start, or how to do it.
Basically I will have a header, which will be 50px heigh, and the relative div below there. Below that div, theres another div that HAS to be 50px inside the screen (Without scrolling). More content of that div, or another div (I dont mind which one) will be outside the screen.
So if the browser is 1000px heigh, 100px will be spend for the top and bottom divs. That means the relative div must be 900px heigh.
To support the idea I have made a simple image of what I'm willing to achieve: (Yeah, paint skills, got no Photoshop at my current location)
The orange border would represent the size of the complete page.
I know this is pretty easy to do with JavaScript, that wouldn't be a challenge for me, but I'm trying to find a CSS-only solution if possible. Any ideas?
An idea, using % instead of px for header and footer : here
<div id='header'></div>
<div id='content'>
<div id='scrollable'>this is my content</div>
</div>
<div id='footer'></div>
And CSS
body {
height:100%;
}
#header {
width:100%;
height:15%;
position:absolute;
top:0;
background:red;
margin:0;
}
#footer {
width:100%;
height:15%;
position:absolute;
bottom:0;
background:blue;
}
#content {
position:absolute;
width:100%;
top:15%;
height : 70%;
background:yellow;
overflow-y:auto;
}
#content #scrollable {
min-height:100%;
}
So I think this is what you want
<div id="scrn">
<div id="top"></div>
<div id="bottom"></div>
</div>
Then some CSS
#scrn {
height: 1700px;
width: 100%;
position: relative;
}
#top {
height: 50px;
width: 100%;
position: fixed:
top: 0px;
}
#bottom{
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
}
This looks right I think? Also I put the position: relative and height in because I am not 100% sure what you are trying to achieve with it.
Ok! Here's a technique I've used a bunch- this will work best if you don't fix the height of your relative positioned div. Based on your description, this is not the intent so it should work fine.
Basic Markup:
<body>
<header>DIV 1 - 50PX</header>
<div class="main">MAIN STUFF - RELATIVE</div>
<footer>DIV 2 - 50PX</footer>
</body>
CSS:
body, html{
width:100%;
height:100%;
}
body{
margin:0;
positino:relative;
}
header{
position:absolute;
width:100%;
height:50px;
top:0;
left:0;
background:#666666;
color:#ffffff;
z-index:10;
}
footer{
position:absolute;
width:100%;
height:50px;
bottom:0;
left:0;
background:#555555;
color:#ffffff;
z-index:10;
}
.main{
position:relative;
box-sizing:border-box;
padding:50px 1em;
height:150%; /* this is to simulate your dynamic content */
background:#cccccc;
}
http://jsfiddle.net/xdeQ6/1/
Adding padding to the main content div will make sure that your actual content at the top and bottom of your page is not hidden behind the header and footer divs.
Here is my approach:
header, footer {
background: #f00;
position: fixed;
width: 100%;
height: 50px;
left: 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
#content {
margin: 50px 0;
}
See my fiddle: http://jsfiddle.net/Vw97D/1/
Does it meet your expectations?
How can I center an img in a parent div tag which is set to overflow: hidden. That is, what I want is to clip the image but clip on both the left/right so the middle of the image is shown.
<div class='wrapper'>
<img/>
</div>
Then styles something like:
.wrapper {
position: absolute;
/* position details here */
overflow: hidden;
}
.wrapper img {
height: 100%;
margin-left: -??; //what here?
}
-50% would be the width of the parent, but I want the width of the img itself.
Firefox supported CSS is acceptable.
http://codepen.io/gcyrillus/pen/BdtEj
use text-align , line-height , vertical-align and negative margin. img virtually reduced to zero, will center itself.
.wrapper {
width:300px;
text-align:center;
line-height:300px;
height:300px;
border:solid;
margin:2em auto;
overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;
/* to show whats been cut off */
position:relative;
z-index:-1;
}
For horizontal only :
.wrapper {
width:300px;
text-align:center;
border:solid;
margin:2em auto;
overflow:hidden
}
img {
margin:0 -100%;
vertical-align:middle;
}
Try to add
display:block;
margin:0px auto;
to ".wrapper img"
Hi please check example
its solve your problem
HTML
<div class='wrapper'>
<img border="3"/>
</div>
CSS
.wrapper {
/*position: absolute;*/
/* position details here */
overflow: hidden;
text-align:center
}
.wrapper img {
height: 100%;
}
i have a mind bobbling question.
I need a 100% width, 100% height container with 20px margin that expands with content. Is this at all possible? The closest i got was with this method:
#container {
position:absolute;
top:0;
bottom:0px;
left:0;
right:0;
margin:20px;
}
but then it wont expand in height with content.
Anybody know the divine technique for this?
I'm pretty sure it isn't possible to do with a single element, but if you don't mind having 3 spacer div elements, this solution works in all browsers:
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-left: 20px;
margin-right: 20px;
margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
background-color: #ccc;
}
.spacer.edge {
background-color: white; /* same as body background */
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="spacer edge"></div>
<!-- content here -->
<div class="spacer"></div>
</div>
<div class="spacer edge"></div>
</body>
</html>
Here's a fiddle to play with: http://jsfiddle.net/dTyTW/
I you want to expand the div with the content , then you need to set position : relative and in order to stick towards the bottom padding-bottom also need to be set.
#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;
}
Values can be adjusted as per the requirement.
Try here
Remove the margin and give each position a 20px.
Also remove the bottom.
Add padding-bottom:20px;
#container {
position:absolute;
top:20px;
left:20px;
right:20px;
padding-bottom:20px;
}
http://jsfiddle.net/jasongennaro/w7dQP/3/
EDIT
If you are not opposed to using some jQuery, you could also do this
var h = $(document).height();
var h2 = $('#container').height();
if(h2 < h){
$('#container').height(h);
}
This ensures that if the div is smaller than the browser viewport, it will expand to fit it.
Once the text is as big or bigger, the styles will take care of it.
http://jsfiddle.net/jasongennaro/w7dQP/8/
<html>
<style>
body
{
margin:0px;
}
div
{
position: absolute;
padding: 20px;
}
img
{
position: relative;
width: 100%;
}
</style>
<body>
<div>
<img src="http://manual.businesstool.dk/screen.jpg" />
</div>
</body>
</html>
Use the padding property... look up the box model.
I have a two column layout:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="sidewrapper"></div>
<div id="contentwrapper"></div>
</div>
</body>
</html>
I want to have both sidebar and content be 100% in height but the most top container's min-height should be 100%.
I tried to solve it with the following css:
* {
margin: 0;
padding: 0;
}
html {
font-family: Georgia, serif;
color: #000; height:100%; min-height:100px;
}
body {
background: #fff; height:100%; min-height:100px; overflow:hidden;
}
#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}
#container {
position:relative;
width: 100%; height:100%;
margin: auto; background:blue;
}
#contentwrapper {
float:left;
background:red;
position: relative;
width: 700px; padding:0px; margin:0px;
height: auto;
}
#sidewrapper {
float:left;
position: relative;
width: 159px; height:100%;
padding:0px; margin:0px;
}
...but I get a scrollbar because of the header's 23px height. I tried to solve it with overflow:hidden for the body element but I do not know if that is the right solution.
Any ideas?
If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.
In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.
Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.
Make #header position absolute. This will cut that block out of the normal flow and you'll be able to make heights of other blocks equal to their parent.
#header {
position: absolute;
width: 100%; height: 23px;
top: 0; left: 0;
}
#sidewrapper,
#contentwrapper {
float: left;
width: 50%;
height: 100%;
}
#sidewrapper .content,
#contentwrapper .content {
margin-top: 23px;
}
The height of an element is compared with its father element. In your case, I recommend you specify the concrete width & height for "containter", because it'll be hard to pretend the size of the screen on many machines.
If you insists use percent, I recommend you use for both element, such as header 25% height and content 75% height.
Lets say I've a html body and a div inside and I want to make the height of the div to the entire browser without scroll bar and side gaps. Then understand the following example below, and implement your own.
Html:
<body>
<div id="yellowDiv">
<div>
</body>
CSS:
body{
margin:0px;
}
yellowDiv{
background-color:yellow;
height:100vh;
}