Develop Reference

How do I set fixed div height 100%

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.

Button moves to the right on hover

I am using the WordPress File Upload Plugin and is working fine, but on hover the button to select a file to upload, the button moves to the right.
I think the following CSS is the important part.
input[type="button"].file_input_button{
width:100px;
height:27px;
position:absolute;
top:0;
margin:0;
padding:0;
background-color:#EEE;
color:#555;
background-image:url(white-grad-active.png);
background-position:left top;
background-repeat:repeat-x;
border-style:solid;
border-width:1px;
border-color:#BBB;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px
}
input[type="button"].file_input_button_hover{
width:100px;
height:27px;
position:absolute;
top:0;
margin:0;
padding:0;
background-color:#EEE;
color:#111;
background-image:url(white-grad-active.png);
background-position:left top;
background-repeat:repeat-x;
border-style:solid;
border-width:1px;
border-color:#333;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px
}
input[type="button"].file_input_button:disabled,input[type="button"].file_input_button_hover:disabled{
width:100px;
height:27px;
position:absolute;
top:0;
margin:0;
padding:0;
background-color:#EEE;
color:silver;
background-image:url(white-grad-active.png);
background-position:left top;
background-repeat:repeat-x;
border-style:solid;
border-width:1px;
border-color:#BBB;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
border-radius:2px
}
What is the CSS code that is causing this?
How can I remove this behavior?
Can I disable the .file_input_button_hover CSS?
This CSS it came with the plugin and I can't get rid from it.
UPDATE:
Playing with Chrome's Developer Tools I saw that on hover the class of the button changed from file_input_button to file_input_button_hover and position changed from nothing to "position: absolute;"
I don't know why but adding the following to the custom CSS solved the issue:
input[type="button"].file_input_button_hover{
position: relative !important;
}
input[type="button"].file_input_button_hover{
position: relative !important;
}

Your problem is with the file_input_button_hover class, set the left value to 0

Skrollr with SlickNav, overlap issue [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I Have fixed images using Skrollr pretty much just like this: http://prinzhorn.github.io/skrollr/examples/classic.html
I am also using Slicknav for the menu. Unfortunately, when the menu opens it opens behind the Fixed "parallax" image.
I've tried changing positioning, margins, z-index, Blah! nothing helps. I would like the menu to open on top of the image.
Edit: Here's some code:
This menu is placed in the div with the class="section-1" which is inside skrollr-body
<ul id="menu">
<li>About</li>
<li>Services</li>
<li>Staff</li>
<li>Map</li>
<li>Contact</li>
</ul>```
The images that come after are outside skrollr-body:
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#section-1 + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(assets/images/back_sun.jpg)"
data-anchor-target="#section-1 + .gap"
data-bottom-top="transform: translate3d(0px, -80%, 0px);"
data-top-bottom="transform: translate3d(0px, 80%, 0px);"
></div>
css:
/*---------------
Slick-NAV
*/---------------
/* Button */
.slicknav_btn {
background: none;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
background-color: #FFF2E8;
}
.slicknav_menu {
background:#212b41;
padding:0;
}
.slicknav_nav ul, .slicknav_nav li {
border-top:2px solid #9FBDD1;
margin-top:0;
margin-right:0;
margin-bottom:0;
}
.slicknav_nav .slicknav_item:hover {
background:none;
color: #FFF2E8;
}
.slicknav_nav a {
color: #FFF2E8;
}
.slicknav_nav a:hover{
background:none;
color:#FFF2E8;
}
.slicknav_nav .slicknav_txtnode {
padding: 7px 15px;
margin: 0;
}
a.slicknav_btn.slicknav_collapsed, a.slicknav_btn.slicknav_open {
background-color: transparent;
}
.slicknav_menu .slicknav_menutxt, .slicknav_brand a, .slicknav_brand {
color: #FFF2E8;
font-family: 'Codystar', cursive;
font-weight: normal;
text-shadow: 0 0px 0px #000;
}
/*---------------
Skrollr
*/---------------
html, body {
height:100%;
}
.skrollr-desktop body {
height:100% !important;
}
body {
font-family:sans-serif;
}
p {
margin:0 0;
}
.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}
.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}
.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}
.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.parallax-image-50 {
height:200%;
top:-50%;
}
.parallax-image-100 {
height:100%;
top:0;
}
.parallax-image.skrollable-between {
display:block;
}
.no-skrollr .parallax-image-wrapper {
display:none !important;
}
#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}
.gap {
background:transparent center no-repeat;
background-size:cover;
}
.skrollr .gap {
background:transparent !important;
}
.gap-50 {
height:50%;
}
.gap-75 {
height:75%;
}
.gap-100 {
height:100%;
}
.header, .content {
background:#eee;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.content-full {
height:100%;
}
#done {
height:100%;
}
Anyone have any ideas?
Thank you!

Answered my own question!
gave .slicknav_menu:
position: relative;
z-index: 10;
Unfortunately the non-fixed content also slides but that I can figure out!

responsive position absolute using javascript

I have create a code snippet to demo my problem.
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:65px;
left:45px;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top:135px;
left:155px;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
top:190px;
left:68px;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
top:220px;
left:213px;
}
<img src="http://i.imgur.com/62GOyK9.png" />
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
There are 4 boxes I want to map the positions on a background, and I did it using position absolute.
But the problem is it can't be responsive. On larger / smaller screen, the image stretched and the mapping became off target. How to solve my issue using javascript?

Do you really need a javascript solution for this?
Why cant you use percentage in CSS position styles?
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:15%;
left:10%;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top: 30%;
right:30%;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
bottom: 30%;
left:30%;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
bottom: 20%;
right:10%;
}
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>

$(function (){
var init_width = $(window).width();
var all_div = $('div');
var init_left = function (){
var result = [];
all_div.each(function (i){
var left = parseInt($(all_div[i]).css('left'));
result.push(left);
});
return result;
}();
$(window).resize(function (){
var width = $(window).width();
all_div.each(function (i){
var now_left = init_left[i]/init_width * width;
$(all_div[i]).css('left',now_left);
});
});
});
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:65px;
left:45px;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top:135px;
left:155px;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
top:190px;
left:68px;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
top:220px;
left:213px;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
I make a draft DEMO to achieve the responsive layout. The key mind is:
when the DOM ready you could get a set of numbers of these div's leftand then you must handle these data to percent for responsive
you should recalculate the window width when resize.
actually, when you work out the first key mind, you will make it. the** resize ** just make the DEMO have more adapted.

Javascript and CSS Dynamic-Width Float Glitch When Resizing

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.