my template is as follows:
.layout{
height:100%;
width: 70%;
position: fixed;
}
.header{
height:20%;
width: 100%;
}
.content{
height:60%;
width: 100%;
}
.footer{
height:20%;
width: 100%;
}
the content has a default height 60%, and i want if the content is filled with data to get auto stretch for (height/width) when necessary, and a scroll appears for whole page, how to do so ?
i tried the solution for giving the parent postion:relative; but that will ignore the default height and minimize the content in case of the content has small data, and i want to keep default height in case of small data.
As indicated by Motoxer4533, use the min-height property: http://jsfiddle.net/uef7v/
just set the .content height with min-height property:
.content{
min-height:60%;
}
that will set the minimum height of .content to 60% and if the data of the content take up more that 60% it will stretch automatically.
but you need to drop the position:fixed on layout. you don't need that if your content is dynamic.
Related
So I have a div on my page that no matter the device size will be 209.53px. I would like to have a calculation that can work out what percentage of the screen that this covers. That way I can set a map/image to fill the remaining portion of the screen.
I have tried to use height 80% ect but I just can't get it right, is there any way in SASS/SCSS to achieve this?
So I would go:
209.53/(SCREEN HEIGHT IN PIXELS) = PERCENTAGE COVERED
100 - PERCENTAGE COVERED = REMAINING VH
div{
height: REMAINING VH;
}
You can't know which percentage of the vh represents a fixed height in css and by extension in sass/scss but you can leave the fixed height in 209.53 (I would recommend to round that value since css will do it anyway) and use css calc. Then your image would have the following height:
height: calc(100vh - 209.53px);
Other solution would be using absolute position and a margin top. Or better, use flex:
.parent {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
.fixed-height-element {
flex: 0 0 209.53px;
}
.image {
flex: 2;
}
}
You set the top and bottom of your div element to get the remaining screen height:
body {
padding:0;margin:0;
}
#fixed {
height: 209.53px;
background-color:green;
width:100%;
}
#remaining {
position:absolute;
top: 209.53px;
width:100%;
bottom:0;
background-color:red;
}
<div id="fixed">this has height 209.53px</div>
<div id="remaining">this has height until screen bottom</div>
SASS is a precompiler therefor it can't help with calculations regarding the screen height.
I have col-sm-1 and col-sm-9 and col-sm-3. I want them to have a full height. When I do height:100%, the height goes full only when I have contents inside them. I want the height to be full even when it's just empty.
So I just did height:2000px; background-color:grey; and now this looks like the way I want. However even a beginner like me know this isn't the best way to do it.
Am I allowed to go height:2000px; and deal with it?
Just use the Flexbox.
Assign their parent a class .flexbox, set the CSS as below.
.flexbox .col {
flex: 1;
}
The height 100% fills the space even if the content isn't there but it may be not working just due to parent container height is not set. So, for this you need to define the parent element height in fixed pixel or set 100% height parent-hierarchy way. In short you can fix this problem by just setting the height 100% to the html,body:
html,body{
height: 100%;
}
.your_element{
height: 100%;
}
And here is a demo:
html,body{
height: 100%;
}
div{
height: 100%;
background-color: red;
}
<div>some content</div>
So I'm trying to make "sections" with section that covers up the full height of the current page. Kind of like this. As you can see the width is set to 100. And heres my code
.cont{
background: #009dff;
height: 100%;
}
But for some reason it doesn't seem to work. Here's a demo. Any ideas?
This should do it.
http://jsbin.com/vijaxuyu/2/edit?html,css,output
html{
height:100%;
}
body{
height:100%;
}
section {
height: 100%;
}
The height % of html and body isn't by default 100%. Hence, you need to inform your browser explicitly. The reason why you have to specify height and sometimes min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
I have a fixed size absolutely positioned area with scrollbars containing variable sized content.
Now I need to wrap content in two divs that are at least as large as area but expand to fit content.
<div id="area">
<div id="outer">
<div id="inner">
<div id="content">content</div>
</div>
</div>
</div>
Requirements:
They need to expand, so their height must be set to auto.
In order to fill container their minimum size must be 100%
Therefore I've tried following CSS (full example in JsFiddle):
#area {
/* defined outside */
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow: scroll;
}
#outer, #inner {
min-width: 100%;
min-height: 100%;
}
It does work for #outer but has no effect on #inner. How can I fix it ?
UPDATE
I'm only interested in Chrome if that helps.
Also, I can accept that it might not be possible if pointed to some authoritative source with explanation.
UPDATE 2
So I've analyzed CSS specs and concluded that my requirements can't be met:
For min-height to work it must be absolutely positioned or it's containing block height must not depend
on content height CSS2(10.7)
I need autosizing so neither #inner nor #outer can be absolutely positioned. This means that
containing block must have specified height.
Therefore #outer can't be containing block of #inner. This leaves me with #area.
According to CSS2(10.1) that's only possible for #inner when element is positioned absolutely which
conflicts with my objective.
#inner using a percentage height means it is based off of the height of its parent #outer, which is not specified as an exact % or px:
#area {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
padding: 20px;
box-sizing: border-box;
}
#outer,#inner {
min-width: 100%;
min-height: 100%;
}
#outer {
height:100%;
overflow: auto;
}
jsFiddle provided here, which shows with color that #inner gets the full height of #outer.
I also took a few liberties. I set your #area CSS to be a more proper full height/width setup, and i made your scrolling component #outer instead of #area, since #inner will be the content that overflows it.
If you change min-height: 100%; to height: 100%; it will work.
Your min-height should be based on px not in % atleast thats how I got my problem fixed. just use a reasonable pixel-height
In this way inner will always be as big as outer.
i'm not sure i have correctly understood the question, what should expand inner or content ?
Assuming you want inner expanded to fill outer.
As mentioned you also need a height of 100%, and a postion of absolute on inner
and then depending on what is supposed to scroll either on inner or content
#outer {
background: red;
position: static;
min-width: 100%;
min-height: 100%;
}
#inner {
background: blue;
position: absolute;
min-width: 100%;
min-height: 100%;
height:100%;
overflow:auto;
}
#content {
height: 200px;
background-color:yellow;
overflow:auto;
}
example here - with content, which scrolls
#outer, #inner {
height:100%;
min-width: 100%;
}
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer