I'm trying to make extensible sidebars to the full document height without Javascript. I started to wrote some code to make this happen, but however, both div height are not extending after the viewport size.
Here is a small codepen of what is my problem http://codepen.io/anon/pen/bpAzo. As you can see, if you scroll down, height of both sidebars are just set to viewport size which is weird because i set both body, html, #sidebars to height: 100%;.
Is there a way to extend to full page height without using Javascript ?
Thank you.
You just set your sidebar height to 100% which gives it just a 100% of current browser size. Remove the height of your sidebar and remove also the html and body code.
#sidebar {
position: absolute;
top: 0;
width: 100px;
color: green;
color: #FFFFFF;
}
.left {
background-color: blue;
left: 0;
}
.right {
background-color: red;
right: 0;
}
DEMO HERE
http://codepen.io/anon/pen/jfEhH
If you set html and body to 100% height it will just be 100% of the window ( it's parent ) size. You need to set a specific height ( 3000px ) or 200% for example, which will be 2 times the windows height.
Body tag on codepen by default have margin. Without margin all looks good.
http://codepen.io/suez/pen/zJhne
But in the future, i will reccomend you to use overflow: hidden; on body (combined with margin: 0), this will provide 100% confidence that all of your content always will be inside viewport (without any scrolling).
Edited: if you want to use more than 100% of viewport height for your site, then you need to use position: fixed; on sidebar.
Just make the "height" attribute in your CSS style sheet to "auto", like as follows,
sidebar {
position: absolute;
top: 0;
height:auto;
width: 100px;
color: green;
}
Don't worry about "sidebar.right" ,as u will see no red color on right side of your page. It will automatically show up when you add up some content to it or just add few <br /> tags.
Related
This site is full-width and adapts to the size of the browser window. However, once the browser window is smaller than the content displayed, the title gets cut off once you scroll to the right.
The default width of 100% seems to be working for the width of the browser window only, not the width of the page! The same also seems to apply on the vertical axis.
Example
#title
{
height: 50px;
color: white;
background-color: #404040;
}
#content
{
width: 800px;
background-color: #f0f0f0;
}
<div id="title">
TITLE
</div>
<div id="content">
CONTENT
</div>
Actual result
This is what it looks like when the page is scrolled to the left
(For the sake of simplicity and privacy, content irrelevant to the question is censored.)
After fiddling a lot with positioning, I eventually came up with something.
body
{
position: absolute;
min-width: 100%;
min-height: 100%;
}
#menu-background
{
z-index: -1;
position: absolute;
width: 250px;
height: 100%;
background-color: #404040;
}
and the menu background HTML
<div id="menu-background"></div>
<body> needs absolute positioning, otherwise the table of the content div will overflow out of the content div. Also, it needs a min-width of 100% to cover both cases: Either the window is smaller, or it's larger.
The menu works the same way, except that it is a single <div> that spans the entire page.
This solution works perfectly for both X and Y (menu and title) stretching and background color.
It's clear that width: 100% takes the width of the window, but not the document.
This behavior is not entirely clear in the spec as far as I can tell.
10.2 Content width: the width
property
<percentage>
Specifies a percentage width. The percentage is calculated with
respect to the width of the generated box's containing block. If the
containing block's width depends on this element's width, then the
resulting layout is undefined in CSS 2.1.
Two methods around the problem involve CSS positioning.
1. position: fixed
Fixed positioning makes the width relative to the viewport.
#title {
height: 50px;
color: white;
background-color: #404040;
position: fixed; /* NEW */
width: 100%; /* NEW */
}
DEMO
2. position: absolute
Absolute positioning also works:
#title {
height: 50px;
color: white;
background-color: #404040;
position: absolute;
width: 100%;
}
DEMO
For me it worked with this two little friends:
width: auto;
min-width: 100%;
No positon: fixed/absolute needed
Ok, so I have a mobile application with Cordova and AngularJS. For the styling I use Less and Bootstrap.
Problem
In the mobile app I have tried to size my divs with percentage (%). But this does not seem to work. I cannot seem to change the following behavior: The divs are as big as the content inside of them. This problem sounds quite easy and I have tried many options on here (stackoverflow) aswell as on the web. Yet I have not found the solution to fix it and it is getting quite annoying.
I have tried
Adding html, body { height: 100% },
Adding html, body, #canvas { height: 100%}
Adding #canvas { min-height: 100% }
Adding html { height: 100% } body { min-height: 100% }
And a lot of other variations. Using px works, but I don't know how big my mobile device is, so that isn't realy handy.. (I also use bootstrap and some media queries for styling).
Example
When I add elements to my div I get the following behavior:
I want to remove that white empty space, but I can only achieve that when using px instead of %.
Less example:
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
#canvas {
min-height: 100%;
}
body {
-webkit-touch-callout: none; //prevent callout to copy image, etc when tap to hold
-webkit-text-size-adjust: none; //prevent webkit from resizing text to fit
-webkit-user-select: node; //prevent copy paste, to allow, change 'none' to 'text'
min-height: 100%;
margin: 0;
padding: 0;
background-color: #cgiColor;
}
.header {
top: 0px;
width: 100%;
height: 5%;
background: #companyColor;
color: #textColor;
}
.incidentContainer {
background: #appBodyColor;
width: 100%;
height: 70%;
}
.footer {
position: absolute;
color: #textColor;
bottom: 0px;
height: 15%;
width: 100%;
background: #companyColor;
}
Extra information
I am using AngularJS, so my application is a single page application. My index.html looks as follows:
<body oncontextmenu="return false" >
<div class="{{ pageClass}}" ng-view ></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="main" src="lib/require.js"></script>
</body>
With of course the standard links to my CSS sheets, and so on.
All the other pages are includes in the 'ng-view' and don't have any or tags. This because they are included.
Solution
The solution was to add the following CSS rule:
div[ng-view]{
height: 100%;
}
This worked, because all divs (except for html & body) are children of this item. Adding the 100% made the div space span to 100% of the screen and thus provides a space for percentage to work.
Credits go to Jai for this answer!
Have you tried to add the following css and set Important attribute
html, body { height: 100% !important }
What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.
But in case of your content area, that is relative to the ng-view div.
I would recommend you to make it 100% height. Something like:
div[ng-view]{
height: 100%;
}
This most likely is because of the fact that in CSS the 100% is a relative value.
With width the default 100% is the width of the screen, or whatever you are looking at.
Height however does not take the height of the screen as 100%. It needs a solid value.
I think that if you change
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
with
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
}
it should work.
The 100vh should set the height of the html to the height of the viewport.
I guess this way works, I have to say though that I myself have not used something to get my page to have a height that is 100% of the screen.
Yay, rendered HTML!
class="incident" is only expanded as large as it needs to be. I believe your fix should be to make that element have a height of 70% (because it will be relative to the whole-page) and then incidentContainer should have a height of 100%.
Percentage heights are relative to the parent element, not the root, so you need to be very aware of any containers, even ones stealthily added by a framework.
Also, if it helps, Jelmergu suggested the vh unit type. This could fit your use case - one "Viewport Height" is equivalent to "1% of the browser's content area". So, 100vh would take up the whole screen. This is true even on deep-level children.
I am specifying a background color for the body which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements has border-right which also needs to show over the full screen height.
My CSS looks like(sample one) better check my demo
demo page
html,body {
height: 100%;
background-color: #fefefe;
}
.cover {
height: 100%;
}
.left_side {
float: left;
height: 100%;
border-left: 1px solid #ccc;
width: 31%;
}
and html is
<body>
<div class="cover">
<div class="left_side">
</div>
</div>
</body>
and the bgcolor and childs border seems up-to some limited distance only like
what is that problem guys i need that background and border as 100% height.
Remove height:100% from your body and html style.
Instead of having a border set to the left container, try setting the border on the content container instead.
your css would be something like:
.large-9 .columns .right_side{border-left:1px solid #333;}
the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.
css for that would be something like:
.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}
Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/
and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/
you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG
You could use absolute position and setting top and bottom:
body {
position: absolute;
top: 0;
bottom: 0;
}
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I thought this was a simple fix:
body
{
height: 1054px;
}
html
{
height: 1054px;
}
Wouldn't this set the max height of the page to 1054px? I have also tried these workarounds but they didn't work with what I wanted:
html
{
overflow: hidden;
}
<body><table id = "myTable"><tr><td> ..... </tr></td></body>
#myTable
{
height: 100%;
}
How do I set an absolute height for a webpage? Also I am more interested in why the body and html height calls wouldn't work. I do a lot of position: relative calls, would that have an effect on it?
width and height do set absolute widths and heights of an element respectively. max-width, max-height, min-width and min-height are seperate properties.
Example of a page with 1054px square content and a full background:
html {
min-width: 100%;
min-height: 100%;
background-image: url(http://www.example.com/somelargeimage.jpg);
background-position: top center;
background-color: #000;
}
body {
width: 1054px;
height: 1054px;
background-color: #FFF;
}
However, since you seem to be table styling (urgh), it would probably be far more sensible to set the height of the table to 1054px and let the body adjust itself automatically to encompass the entire table. (Keep the html style proposed above, of course.)
Good question. I’m not sure, but have you tried using a single <div> (or <section>) inside <body>, and setting the width, height and overflow: hidden on that? Browsers might give special treatment to <html> and <body>.
Did you try setting the CSS margin of body to 0? Otherwise there will be some amt (depending on browser) of margin that is included in your page height (and width) but isn't controlled by the height style;
In CSS:
body: { margin: 0; }
IN jQuery:
$('body').css('margin', 0);