I have 3
Header
Content
Footer
They all set position fixed.
How to set (content) height automatically to be 100%?
The problem is the last text on the content section is hidden by footer div.
How to set content div height automatically calculate 100% - footer height?
html,body { height:100%; }
.wrapper { position:relative; width:100%; height:100%}
.box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
.box2 { position:fixed; top:30px;left:0; width:100%; height:100%; overflow-y:auto; background:gray}
.box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}
<div class="wrapper">
<div class="box1">head</div>
<div class="box2">content>last text</div>
<div class="box3">foot</div>
</div>
Add height:calc(100% - 60px); to box2 for minus header and footer both height and set overflow-y:hidden to html,body so you can get fixed div 100% height without scroll
html,body { height:100%; overflow-y:hidden; }
.wrapper { position:relative; width:100%; height:100%}
.box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
.box2 { position:fixed; top:30px;left:0; width:100%; height:calc(100% - 60px); overflow-y:auto; background:gray}
.box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}
<div class="wrapper">
<div class="box1">head</div>
<div class="box2">content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>last text</div>
<div class="box3">foot</div>
</div>
calc() CSS function lets you perform calculations while setting height, width or other property.
For your case, height: calc(100% - 30px); would help you out.
for more detail about calc(), please refer to MDN.
To fixed height or width you can use calc(100% - 30px);..
To handle dynamically changing height/width, You need to calculate with Javascript like this....
var screenHeight = window.innerHeight;
var headerH = document.getElementById("header").offsetHeight;
var footerH = document.getElementById("footer").offsetHeight;
document.getElementById("content").style.height = ((screenHeight - headerH) - footerH) + "px";
document.getElementById("content").style.top = headerH + "px";
.header{
background-color:red;
position:fixed;
top:0px;
left:0px;
width:100%;
}
.footer{
background-color:red;
position:fixed;
bottom:0px;
left:0px;
width:100%;
}
.content{
position:fixed;
left:0px;
background-color:yellow;
width:100%;
}
<div class="header" id="header">header</div>
<div class="content" id="content">content</div>
<div class="footer" id="footer">footer</div>
Instead of height, use bottom: 30px; for box2. it will work.
Related
I have a fixed width container.
In which i have a footer which is stuck in the fixed width wrapper. i want to expand the footer width 100%.
I cannot modify the html code. I need a guidance how can i make the footer 100% keeping it in fixed wrapper.
I tried to make it work through position relative / absolute.
This is my code.
<style>
.wrapper{ width:980px; margin:0 auto}
.body{background:red}
.footer{ width:100%; background:green}
</style>
<div class="wrapper">
<div class="body">Main body contain</div>
<div class="footer">Footer</div>
</div>
position absolute will work for you
.footer {
position: absolute;
background:green;
left: 0;
right: 0;
}
You can do this by absolute positioning .footer. Change what you have to the following.
.footer {
background:green;
position: absolute;
left: 0;
right: 0;
}
If you add position: relative; to .wrapper this will not work and your footer will be contained within .wrapper.
jsFiddle: http://jsfiddle.net/8qkes6ba/
Try width: 100vw; which means 100 viewport width. and is not relative to container, like percentages.
You will still need to position it to the left.
Try adding this:
.wrapper{ width:980px; margin:0 auto}
.body{background:red}
.footer{ position:absolute; left:0; width:100%; background:green}
jsFiddle
The issue is that the wrapper class is set to have a width of 980px which causes the width of the footer class when set to 100% only be as big as 980px.
<style>
.wrapper{ width:980px; margin:0 auto}
.body{background:red}
.footer{ width:100%; background:green}
</style>
<div class="wrapper">
<div class="body">Main body contain</div>
</div>
<div class="footer">Footer</div>
Is it possible to center an absolute position div within a relative dive with margin 0 auto?
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:10px;
left:10px;
}
I was hoping that the absolute positioning would work within the outer one ok but I guess the margin. The above code can be seen here: http://jsfiddle.net/g4y4czff/
Ideally I'd like to use css to solve this but I reckon there's more likely to be a js solution.
Any ideas greatly appreciated.
C
New fiddle: http://jsfiddle.net/g4y4czff/1/
Just add position: relative to .outer
Reason is because the default position property is static
since you wanted it centered, here you have it centered horizontally and vertically too. Placing position:absolute; inside position:relative; allows it to be inside of it.
http://jsfiddle.net/g4y4czff/3/
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
position:relative;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:0;
margin: auto;
left:0;
right:0px;
bottom:0;
}
Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
I've got a snippet of code working fairly well thus far, but there's a small glitch that needs to be worked out.
The goal is to have two items next to each other where one is a fixed width and the other fills the remaining available width within a given container.
The fluid item is resizing appropriately, however there's a little hiccup every so often as the browser/container is resized.
See: http://jsfiddle.net/tedgrafx/kTeCC/
The two items are floating, but as you resize the width, at certain widths they don't float, and appear vertically stacked - pushing one below the other.
What can be done to remedy this little glitch so it appears seamless during resizing?
Any/all help would be appreciated.
HTML:
<div class="panel">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS:
html, body{
margin:0;
padding:0;
}
.panel {
float:left;
width:100%;
margin:0;
padding:0;
}
.left {
float:left;
width:50px;
height:10px;
margin:0;
background:red;
}
.right {
float:right;
width:100%;
height:10px;
margin:0;
background:blue;
}
Javascript:
// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
resizeRight();
$(window).resize(function () {
resizeRight();
});
});
function resizeRight() {
// Subtract the width of the TopLeft section from the width of the entityPanel div:
var right_width = $('.panel').width() - ($('.left').width());
// Set the width of the TopRight to an even number:
if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
// Set the width of the TopRight section:
$('.right').css({ 'width': right_width });
}
}
You don't need the javascript really, you can lose the float on #right.
Unless I misunderstood what you wanted.
http://jsfiddle.net/kTeCC/7/
html, body{
margin:0;
padding:0;
}
#main {
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:30px;
height:20px;
margin:0;
background:red;
}
#right {
height:30px;
margin:0;
padding-left: 5px;
background:blue;
}
br {
clear: both;
}
http://jsfiddle.net/kTeCC/16/
simple solution that only use position,top, left, right
html, body{
margin:0;
padding:0;
}
#main {
position:relative;
width:100%;
margin:0;
padding:0;
}
#left {
position: absolute;
left:0;
top:0;
width:30px;
height:30px;
margin:0;
background:red;
color:#fff;
}
#right {
position:absolute;
left:30px;
right:0;
top:0;
height:30px;
margin:0;
background:blue;
color:#fff;
}
Just as an addendum to what OneOfOne suggested; to have #left and #right not overlap (while not floating #right) you can add padding-left to #main and position #left with a negative margin-left: http://jsfiddle.net/rasmusfl0e/33pVN/
html, body{
margin:0;
padding:0;
}
#main {
padding-left: 30px;
background-color: pink;
}
#main:after {
clear: both;
content: " ";
display: table;
}
#left {
float: left;
margin-left: -30px;
width: 30px;
background: red;
}
#right {
background: blue;
}
And BTW - floating blocks will stack on top of eachother if their combined width is bigger than their container; the modulus thing you're doing to get even pixel widths on #right is your culprit.
I've created a div and add 2 divs to it:
<div id="content">
<div id="a"></div>
<div id="b"></div>
</div>
and the styles:
#content {
width:100px;
height:100px;
background-color:blue;
}
#a, #b {
position:relative;
top:0px;
left:0px;
width:100px;
height:100px;
background-color:red;
}
#b {
top:-100px;
background-color:green;
}
In Firefox I got one 100x100 green "box", but in IE, the "content" div is higher than 100px (it is 200px high), and you can see the blue "box" under the green.
Is it possible to force the "content" div to be 100px high?
#content {
width:100px;
height:100px;
background-color:blue;
overflow:hidden;
}
Try overflow:hidden or overflow:auto on the #content div to see if that gives you the desired result. You may also want to issue a padding:0px; and margin:0px; on your divs.