I'm having a problem to stick my footer to bottom. I'm following the classic wrapper idea with an empty div that push the footer to the bottom. This is my code:
HTML
<html>
<body>
<section class="wrapper">
<!--main content-->
<div class="push"></div>
</section>
<footer class="footer">
<div class="container">
<!--footer content-->
</div>
</footer>
</body>
</html>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -13em;
}
.push {
height: 13em;
clear: both;
}
.footer{
padding: 20px 0;
width: 100%;
clear: both;
}
I used 13em for the height and margin sizes because is the size for the medium and large screens.
This code works, but the problem starts when the layout has to adapt to extra-small and small sizes. Infact when the screen becomes smaller, the footer's height increase.
So my question is: how can i set a dynamic height to the .push div and to the margin of the wrapper? I want those values equal to the footer height.
I tried also some javascript but without success.
P.s. please don't tell me to set a static height for the footer (13em for example) because, as i said, i want an adaptative height.
UPDATE
I want something like this: http://ryanfait.com/html5-sticky-footer/
You are missing a important part in the html, the body content, there is no content. I added a div with height and take a look
<body>
<section class="wrapper">
<!--main content-->
<div class="push"></div>
</section>
<div style="height:100%;min-height:100%;"></div>
<footer class="footer">
<div class="container">
<!--footer content-->
</div>
</footer>
</body>
Now its working as you want. Here is the fiddle
https://jsfiddle.net/wgrLfxg3/12/
Take a look to the div I set height and min-height to 100%. Now put your content inside this div and it will work fine.
Remove the wrapper and add this to your css instead:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Related
I have two div element inside main div element I want those two div float left and the align center of the main div.
Something like this.
[ main div [div1][div2] ]
I have successfully floated the two divs but I am failing to assign the space on both the side. I mean to say align them in center.
code to float left css
.container{
width:100%
height: auto;
}
.img{
width:auto;
height:auto;
float:left;
}
.data{
width:auto;
height:auto;
}
html code
<div class="container">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
if you write text-align:center to parent.It will align their children
thank you for comments
.container{
width:100%
height: auto;
text-align:center;
}
.data{
width:auto;
height:auto;
}
<div class="container">
<div class="img"><img src="https://picsum.photos/200/300"/></div>
<div class="data">data goes here</div>
</div>
You can wrap the img and data div in a div, then float that div right with a 50% width. I prefer not to use floats; flexbox would be a better option in my opinion, but if you like floats, I put some code below you can try.
HTML:
<div class="container">
<div class="dataImgContainer">
<div class="img"> image goes here</div>
<div class="data">data goes here</div>
</div>
</div>
Add below to the CSS sheet:
.dataImgContainer {
width: 50%;
float: right;
}
I found a very interesting image grid background on Codepen, that I'd like to use.
Only thing is i'm experiencing issues with getting a DIV on top of it.
https://codepen.io/pirolab/pen/qmeNqY
I've tried things such as top, z-index, but for some reason I'm struggling to get anything to be on top of the images.
Example of something I've tried
<section class="o-hero">
<div class="o-cards__main">
<div style="z-index:999;top:5;background:blue">Hello<div>
<div class="o-cards__container" id="container">
</div>
</div>
</section>
I'd really appreciate it if someone could help.
https://codepen.io/andrasadam93/pen/KyNvoe forked from yours if I understood your query correctly. The key parts are these (although I added some extra for visibility):
<section class="o-hero">
<div class="overlay">
<p>This is overlay</p>
</div>
<div class="o-cards__main">
<div class="o-cards__container" id="container"></div>
</div>
</section>
.overlay{
position:absolute;
z-index:999;
width: 100%;
height: 100%;
font-size: 24px;
font-weight:700;
color:#ff0000;
display:flex;
align-items:center;
justify-content:center;
}
I'm trying to make a simple page where there are several rows of images, each one with a horizontal scrolling (using Nicescroll 3).
Using the mouse, when the horizontal scrolling of the row is finished, the mouse wheel has no function. What I wanted to do is that the page continued scrolling vertically after the horizontal scrolling has finished.
My code:
HTML:
<div id="main-content">
<div class="row">
<div class="square-container">
<div class="square"></div>
</div>
<!-- several other square-container divs -->
<div class="square-container">
<div class="square"></div>
</div>
</div>
<div class="row">
<!-- several other square-container divs -->
</div>
<!-- several other rows -->
</div>
</div>
CSS:
#main-content{
min-height: 100%;
height: auto;
}
#main-content > .row {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
.square-container {
float:none;
display:inline-block;
margin: 20px 30px 5px 30px;
}
.square{
height: 100px;
width: 100px;
border: 1px solid black;
}
Here's my Fiddle
Thanks for feedback.
Added to TODO list.
Issue opened -> https://github.com/inuyaksa/jquery.nicescroll/issues/451
I'm trying to build this web app thing (it'll eventually a stage/props/que management system for my community theatre group) and I've encountered quite a difficult problem. Apologies if this question has been answered before, I certainly couldn't find anything relating to this specific problem.
Here's the last two I've tried. In theory they have the best chance of working but... they aren't working.
questions/2758651/how-to-change-height-div-on-window-resize
questions/16837525/resize-div-height-with-jquery
So what I'm doing is creating a page that resizes to fit the current screen real-estate the problem I'm having is the central scrolling div and the 'sidebar's' scrolling div only scroll when they have a fixed height. Basically if I use a percentage height in my CSS it becomes the size of it's contents regardless of how overflow: scroll; is setup. I'm thinking it's got something to do with the float:left; definition on all col-*-* elements. The thing I can't fathom is that when I set the div a fixed height (say height:300px;) everything works. Hence why I'm trying JS/JQ solutions but apparently even $(window).height() is getting the document height in Chrome and not the 'viewport' height.
Here's the page as it stands with a fixed height. http://azarel-howard.me/stage-management/props-manager/ I've tried a handful of JS solutions but... they don't seem to run. Or they run into the same issues.
edit: code as requested;
<body>
<!-- Scroll block - this works with fixed height. However I NEED variable height and also WP8 IE support which just flat out doesn't work as I've discovered. (scrolling-wise that is) -->
<div class="scrollable col-lg-9" style="height: 650px; overflow-y: auto;">
<div class="container">
<!-- This scene block get's repeated for each scene -->
<div class="scene row">
<h4>Scene 1</h4>
<div class="container">
<!-- This script block get's repeated for each speakers block within the scene -->
<div class="script row col-lg-offset-1">
<div class="col-lg-2">
<h6>Speaker-1:</h6>
</div>
<div class="col-lg-10">
<p>Speaker's text</p>
</div>
</div>
<!-- End script block -->
</div>
</div>
<!-- End scene block -->
</div>
</div>
<div class="col-lg-3" style="height: 650px;">
<div class="container">
<!-- Scroll block - again this works with fixed height. -->
<div class="row" style="height: 430px; overflow-y: auto; overflow-x: hidden;">
<h5>Stage Props</h5>
<div class="row">
<div class="container">
<div class="col-lg-12">
<h6>Scene 1</h6>
</div>
</div>
</div>
</div>
<!-- Everything from here down is irrelevant for the purpose of figuring out how to have a variable height scrolling div but the presence of these elements will effect to height variables for this specific scrolling div. -->
<div class="row">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_004.jpg" alt>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_005.jpg" alt>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-default" style="width:49%;">Current Que</button>
<button type="button" class="btn btn-default" style="width:49%;">Next Que</button>
</div>
</div>
</div>
</body>
And the CSS for reference: these excerpts are extracted directly from bootstrap.css
.col-lg-9,
.col-lg-3 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-lg-9 {
width: 75%;
}
.col-lg-3 {
width: 25%;
}
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
Ok... I just found this which apparently should work I'm trying it now.
HTML5 Canvas 100% Width Height of Viewport?
Ok at long last I've discovered the secret to using height percentages! I'm going to answer my own question (even though I think it's somewhat bad form but anyway).
With percentages of width everything works as expected. If a relative width is defined it is based off of the parent elements width, which unless explicitly assigned, is the size forced on it by the other content inside of it (say a picture that's 200px wide).
Now it doesn't work this way with height. I decided to go back to basics with this one and concentrated on background-color div's to isolate the factor. After a bit I decided a simple google search was in order, and very quickly discovered this forum question from '08 http://forums.htmlhelp.com/index.php?showtopic=7543 and there you go.
In order to use percentage height the height of the parent element MUST be EXPLICITLY defined from the opening HTML tag all the way down to the element where it counts. With the exception of parent elements that have explicit px heights defined.
So for those of us wanting to make 'fullscreen' apps (ie those that are contained within the dimensions of the browser viewport) we need to include the following CSS code.
html, body {
height: 100%;
}
or in my case the div row elements directly under the body also need this applied so
html, body, body > div.row {
height: 100%;
}
and that will make all the difference.
Just remember that from this level down you will still need to include in-line style statements for each and every element that needs to be percentage scaled.
Assuming your HTML is something along the lines of:
<div class="sidebar">
<!-- sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
You can achieve an independently scrolling sidebar with the following style declarations:
.main-content {
position: relative;
width: 75%;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 25%;
overflow-y: scroll;
}
Here's a jsfiddle example http://jsfiddle.net/7txqj/
At my Page there are tow sections, a header div and the contents div. I want JS or jquery solution to stick the header section at the top, so that when user scrolls the contents section would cross and cover the header section.
html:
<div id="header">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
http://jsfiddle.net/KNh46/
Update: misunderstood, so you want the content to scroll over the header, not under. Then it should be like:
#header {
position: fixed;
height: 100px;
top: 0;
z-index: 100;
}
#content {
position: relative;
margin-top: 100px;
z-index: 101;
}
See an example here: http://jsfiddle.net/aorcsik/v7zav/
If your header is fixed height, say 100px, then:
#header {
position: fixed;
height: 100px;
top: 0;
}
#content {
margin-top: 100px;
}
This way when scrolled to the top, the header won't overlay the content, but when you start to scroll down, it will.
Something like this, if I understand your question:
<div id="content_wrapper" style="position:relative">
<div id="header" style="z-index:1; position:absolute; top:0px">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content" style="z-index:5">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
</div>
I'm using https://github.com/bigspotteddog/ScrollToFixed on my projects with no problems. ScrollToFixed allows you to set when the div will be fixed based on the scroll position.
fiddle with example: jsfiddle.net/ZczEt/167/
you should add css:
*{margin:0;padding:0}
#header{
position:fixed;
width:100%;
height:200px;
background:#ccc;
}
h3{
text-align:center;
}
#content{
background:#f1f1f1;
padding-top:200px;
min-height:500px;
}
jsfiddle
I myself came with another solution :
add another container div to the header and then position that div to fixed, and make the contents to be absolute. but this way you need to specify a min-height or height for the header:
http://jsfiddle.net/pna54/
<div id="header">
<div class="container">
<h3>I'd like to stick here at the background, please! </h3>
</div>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
css:
div{margin:0;padding:0}
h3{
padding:0;margin:0;
padding-top: 100px;
padding-bottom:100px;
text-align:center;
}
#header{
background:#ccc;
min-height:200px;
width:500px;
position:relative;
}
.container{
position:fixed;
width:100%;
max-width:500px;
}
#content{
background:#f1f1f1;
min-height: 500px;
position: absolute;
width:500px;
}
http://jsfiddle.net/pna54/