i can make full height divs but if content is longer than screen, div stays 100%, dont be full height.
so, i want to full height fixed div.
but i cannot do fixed.
i using this style;
<div id="left">
content
</div>
<div id="right">
content
</div>
and css;
html,body {height: 100%;background:#fff}
#left {height: 100%; width:200px; position:absolute; top: 0; left:0; background: black;}
#right {height: 100%; margin-left:200px; background: red;}
this is the result after i write too long content in #right div.
https://jsfiddle.net/hq21zmq8/
as you see, if content is longer than div, div isnt growing longer. how can i do fixed height ?
Add overflow: scroll if you want scrollbar
#right {height: 100%; margin-left:200px; background: red; overflow: scroll;}
or
overflow: auto
if the scrollbar should be hidden when not needed. as #Sverri M. Olsen said :)
You want to take a look in the overflow attribute in the css.
overflow: auto;
or if you always want a scroll bar
overflow: scroll;
should do the trick
Add overflow: scroll; property
https://jsfiddle.net/hq21zmq8/7/
Add the following: overflow-y: auto
This should add a scrollbar if needed only.
Another thing is, I always use height: 100vh. Easier to work with in my opinion... But that's just a personal matter.
Use min-height property if You want div to grow
#right {min-height: 100%; margin-left:200px; background: red;}
Or overflow if You want scrollbar
#right {height: 100%; margin-left:200px; background: red;overflow: auto;}
add overflow-y:scroll to #right like
#right {
height: 100%;
margin-left:200px;
background: red;
overflow-y:scroll;
}
Related
<html>
<body>
<div class="container">
<div class="menu"></div>
<div class="list"></div>
</div>
</body>
</html>
.menu{
float:left;
width:50%;
}
.list{
float:right;
width:50%;
}
how to disable the whole html's scroll. but the menu div and list div can scroll vertically?
and dependently?
I mean when I scroll the left div the right div do not have to scroll together.
You need to start from the html tag down. It and all parents of your scrollable elements should have the height of the viewport.
This means that the html, body, .container and both scrollable elements should have a height: 100% or height: 100vh.
Then you can make the scrollable elements actually scroll independently by adding overflow: hidden.
If this doesn't make sense, please see this pen which I made for you.
You need to prevent vertical scrolling on your .container. This can be done by using the overflow CSS property. Look at the code below on how you can achieve this and also enable vertical scrolling for your two elements (.list and .menu).
body {
margin: 0;
padding: 0;
}
.container {
max-height: 100vh;
height: 100vh;
overflow-y: hidden;
display: flex;
}
.menu {
overflow-y: auto;
width:50%;
}
.list {
overflow-y: auto;
width:50%;
}
I am trying to force div #content to fill vertically #screen div which has fixed size and allows scrolling on horizontal axis. The problem is #header which fit its content so I am unable to set fixed height for #content. #content has columns which are horizontally scrollable.
Setting height in jQuery should be easy but I am looking for CSS-only solution.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
}
#content {
-webkit-column-width: 100px;
max-width: none;
height:100% ;/*can not set fixed number as #header height could change*/
}
http://jsfiddle.net/Y7sfc/2/
I'm not sure if I understand your question fully but iI'm assuming its something along the lines of you not wanting a vertical scroll bar? and only a horizontal overflow right?
I added a height: 20%; to your header (or whatever you want) and changed the height of your #content to fill the rest so in this case, height: 80%;.
#container {
background: #f00;
width:500px;
height:500px;
padding:10px;
overflow: auto;
}
#header {
background: #0f0;
width: 100%;
height: 20%;/*add up to 100%(total size) of #container along with other elements*/
}
#content {
-webkit-column-width: 100px;
max-width: none;
height: 80%% ;/*add up to 100%(total size) of #container along with other elements*/
}
I believe the problem is because your #header and #content are both inside #container which has a set amount of space. Since your #content was set to take heigh: 100% of the space inside #container the #header still had to make room thus pushing the limit above 100% and creating a vertical slide bar.
http://jsfiddle.net/Y7sfc/4/
I want to split up the view in four parts. A header at the top, using full page width and fixed height.
The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.
What I tried is (without the header):
#wrap {
width: 100%;
height: 100%;
}
#block12 {
width: 100%;
max-height: 49%;
}
#block1,
#block2 {
width: 50%;
height: 100%;
float: left;
overflow-y: scroll;
}
#block3 {
width: 100%;
height: 49%;
overflow: auto;
/*background: blue;*/
}
.clear {
clear: both;
}
<div id="wrap">
<div id="block12">
<div id="block1"></div>
<div id="block2"></div>
<div class="clear"></div>
</div>
<div id="block3"></div>
</div>
Apparently, using a percentage value for the height won't work that way. Why is that so?
add this to you CSS:
html, body
{
height: 100%;
}
working Fiddle
when you say to wrap to be 100%, 100% of what? of its parent (body), so his parent has to have some height.
and the same goes for body, his parent his html. html parent his the viewport..
so, by setting them both to 100%, wrap can also have a percentage height.
also:
the elements have some default padding/margin, that causes them to span a little more then the height you applied to them. (causing a scroll bar)
you can use
*
{
padding: 0;
margin: 0;
}
to disable that.
Look at That Fiddle
When you set a percentage height on an element who's parent elements don't have heights set, the parent elements have a default
height: auto;
You are asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing with the height of child elements.
Besides using a JavaScript solution you could use this deadly easy table method:
#parent3 {
display: table;
width: 100%;
}
#parent3 .between {
display: table-row;
}
#parent3 .child {
display: table-cell;
}
Preview on http://jsbin.com/IkEqAfi/1
Example 1: Not working
Example 2: Fix height
Example 3: Table method
But: Bare in mind, that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher. As Fallback you could use JavaScript.
add this to your css:
html, body{height: 100%}
and change the max-height of #block12 to height
Explanation:
Basically #wrap was 100% height (relative measure) but when you use relative measures it looks for its parent element's measure, and it's normally undefined because it's also relative. The only element(s) being able to use a relative heights are body and or html themselves depending on the browser, the rest of the elements need a parent element with absolute height.
But be careful, it's tricky playing around with relative heights, you have to calculate properly your header's height so you can substract it from the other element's percentages.
Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop...
See this :
percentage in height doesn’t work?
The div take the height of its parent, but since it has no content (expecpt for your divs) it will only be as height as its content.
You need to set the height of the body and html:
HTML:
<div class="block12">
<div class="block1">1</div>
<div class="block2">2</div>
</div>
<div class="block3">3</div>
CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block12 {
width: 100%;
height: 50%;
background: yellow;
overflow: auto;
}
.block1, .block2 {
width: 50%;
height: 100%;
display: inline-block;
margin-right: -4px;
background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
width: 100%;
height: 50%;
background: lightblue;
}
And a JSFiddle
Basically, the problem lies in block12. for the block1/2 to take up the total height of the block12, it must have a defined height. This stack overflow post explains that in really good detail.
So setting a defined height for block12 will allow you to set a proper height. I have created an example on JSfiddle that will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page.
Here is an example including a header and block3 div with some content in for examples.
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
}
#block12{
position:absolute;
top:20%;
width:100%;
left:0;
height:40%;
}
#block1,#block2{
float:left;
overflow-y: scroll;
text-align:center;
color:red;
width:50%;
height:100%;
}
#clear{clear:both;}
#block3{
position:absolute;
bottom:0;
color:blue;
height:40%;
}
I'm looking to construct a two-column layout with a fixed left column and a fluid right, both with 100% height, like this example:
I've tried so many variations I can't remember what I've tried now, and just can't get it to look right. I've also tried looking at websites such as LayoutGala but they don't have any example with both columns having a 100% height.
I can't remember what I have tried already but this was definitely my last attempt. I know this because this was the last visited web page before I was arrested for throwing a computer monitor from the fourth floor of an apartment block.
body { margin:0; padding:0; }
.left-column { position:absolute; top:0; width:235px; height:100%; background:#090909; }
.right-column { margin-left:235px; background:yellow; height:100%; width:100%; }
<div class="page-wrapper">
<div class="left-column"></div>
<div class="right-columnr">
sd
</div>
</div>
This is the result here:
MyFiddle
I'm so used to my 960 wide centered website, that when it came to a full screen fluid layout, it completely threw me. Any help greatly appreciated.
First, you need to fix right-columnr typo, Second: when you set a height of 100% on a element to take the entire height of screen, its parent should have a height of 100% too:
CSS:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.page-wrapper {
height: 100%;
position: relative;
}
.left-column {
position:fixed; /* <-- fixes the left panel to prevent from scrolling */
top:0;
left:0;
width:235px;
height:100%;
background:#090909;
}
.right-column {
margin-left:235px;
background:yellow;
min-height:100%; /* <-- fixes the background-color issue when content grows */
}
HTML:
<div class="page-wrapper">
<div class="left-column"></div>
<div class="right-column">
This is the content.
</div>
</div>
JSBin Demo
IF You really want your columns to have 100% height then You must set 100% height on body and html elements.
This works:
html {height: 100%}
body {height: 100%}
.page-wrapper {height: 100%} /* This element is redundant unless You know You will need it in future for something */
.left-column {float: left; width: 235px; height: 100%}
.right-column {overflow: hidden; height: 100%}
Edit:
Demo based on Your code: http://jsfiddle.net/YL8Eh/
I have a content div. I want it to be atleast 90% of the screen.
I currently have:
min-height: 400px;
height: auto !important;
height: 400px;
in my #content div's css.
Changing to 90% did not work.
Is there some way to do this?
Essentially it will always run 90% down the screen unless something makes it bigger than 90%.
Thanks
You need to set html and body to fill 100% of the height, look at this fiddle: http://jsfiddle.net/promatik/KhCb6/
html, body {
height: 100%;
}
#myDiv {
min-height: 10px;
height: 90%;
background-color: #CCC;
margin: 1px;
}
Your height:auto !important is killing it. Remove it. Also, I would suggest using this method:
height:90%;
min-height:400px;
Depends how you're going to have the content, you can fake this by letting the overflowed content have the same background. For example:
#mainDiv {
min-height: 10px;
height: 90%;
background-color: #ddd;
}
#mainDiv p {
background-color: #ddd;
}
This way, your overflowed content would "look like it's expanding" with the div. Not ideal, but this gets what you're trying to achieve.
you need to set min-height of Div ie min-height:90%;
#mainDiv {
min-height: 90%;
background-color: #ddd;
}