After following a n amount of sticky footers tutorials i got stuck.
Can anyone explain where my sticky footer is going wrong?
The main idea is that the footer gets on the bottom of the page.
If the page is larger then the window then the footer should be viewable after scrolling down.
The code works on the homepage as it should except for that i get a little bit of space below the footer.
As soon as the content is bigger than the window the footer stops working.
css:
html, body {
min-height:100%;
height:100%;
margin: 0;
padding:0;
font-family: 'Open Sans', sans-serif;
background-color: #2b2d2f;
color: #d9edf7;
}
#wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -30px;
}
#wrap:after {
content: "";
display: block;
}
#footer, #wrap:after {
height: 30px;
}
#footer{
background-color: #2b542c;
text-align:center;
}
html:
<div id="wrap">
... content...
</div>
<div id="footer">
... content ...
</div>
You can use min-width on #wrap.
Look at this Codepen
Just like:
#wrap {
min-height: calc(100vh - 30px); /* '30px' - Height of the footer */
}
Hope this helps!
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color:red;
}
<body>
<nav></nav>
<article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</article>
<footer></footer>
</body>
#footer {
background-color: #2b542c;
text-align: center;
position: fixed;
width: 100vw;
top: calc(100vh - 30px);
}
If you change your footer style to this what you will get is a Sticky Footer that is responsive and will work no matter how its parent element sizes are set, since it's screen dependent.
Related
I'm trying to prevent an image and text from overlapping with each other in html. Currently this is what I have:
But when the screen size gets smaller, the text and image intercept. I'm looking to make it so the text conform to the boarders of the image. This is what's happening now:
Lastly, this is my CSS
.image {
width: 500px;
margin-left: auto;
display: block;
padding-top: 10%;
padding-right: 10%;
}
.text {
font-size: 22px;
padding-top: 10%;
max-width: 700px;
position: absolute;
}
Your issue is with absolute positioning. Whenever you use position:absolute you remove that element from the source flow. You can try to remove the absolute positioning and then try something like the following:
Codepen example
<div class="parent">
<div class="text">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
<div class="image">
Place your image here.
</div>
And CSS:
.parent {
display: flex;
max-width: 1000px;
margin: 0 auto;
}
.text, .image {
padding: 15px;
}
.image {
width: 500px;
}
.text {
width: calc(100% - 500px);
}
I would like to accomplish something like what's pictured above, using pure CSS. It must have the following features:
image-container will contain a 3x4 aspect ratio image, which should fill the available viewport height. Consequently, image-container will have a variable width, depending on the height of the viewport.
image-container should be fixed in place as the window scrolls.
content-container should be scrollable.
content-container should fill all the available space between the right edge of image-container and the right edge of the viewport.
In the past, I might have accomplished it with something like this (using jquery):
// style.css
.image-container {
position:fixed;
top: 0px;
left:0px;
bottom: 0px;
}
.image-container img {
height: 100%;
}
// script.js
$(window).load(function() {
var width = $('.image-container').width();
$('.content-container').css({'margin-left': width});
});
Is this possible using only CSS? Perhaps using flex?
css solution
use flex
html,
body {
height: 100%;
overflow: hidden;
}
html {
background-color: #000;
}
.body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
color: #999;
}
.container-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
height: 100%;
}
.image-container {
background-size: contain;
text-align: center;
height: 100%;
}
.image-container img {
height: 100%;
width: auto;
}
.content-container {
height: 100%;
display: flex;
flex-direction: column;
}
.content-inner-container {
flex-grow: 1;
overflow-y: auto;
padding: 20px 20px 40px 20px;
}
<div class="body">
<div class="container-wrapper">
<div class="image-container">
<img src="http://placehold.it/750x1334">
</div>
<div class="content-container">
<div class="content-inner-container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</div>
</div>
</div>
js solution
$(document).ready(function(){
var width = $('.image-container').width();
$('.content-container').css({'width': 'calc(100% - '+width+')'});
});
html,
body {
height: 100%;
overflow: hidden;
}
html {
background-color: #000;
}
.body {
margin: 0;
width: 100%;
height: 100%;
background-color: #333;
color: #999;
}
.container-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
height: 100%;
}
.image-container {
background-size: contain;
text-align: center;
height: 100%;
}
.image-container img {
height: 100%;
width: auto;
}
.content-container {
height: 100%;
display: flex;
flex-direction: column;
}
.content-inner-container {
flex-grow: 1;
overflow-y: auto;
padding: 20px 20px 40px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="body">
<div class="container-wrapper">
<div class="image-container">
<img src="https://dummyimage.com/480x640/6b676b/fff">
</div>
<div class="content-container">
<div class="content-inner-container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</div>
</div>
</div>
I believe I've accomplished what you're attempting. Check out this fiddle.
.image-container{
height:100vh;
width:100vh - 25%;
border:2px solid red;
display:inline-block;
margin:0;
position:fixed;
}
.content-container{
border:2px solid green;
margin-left: 100vh - 25%;
display:inline-block;
width:100%;
height:2000px;
}
<div class="image-container"></div>
<div class="content-container">
<p>I would like to accomplish something like what's pictured above,
using pure CSS. It must have the following features. </p>
</div>
I want to have the following website style:
The current styles of "OTHER DIV" AND "MOTHER DIV" are displayed in the picture. How do I have to style the other divs like .div_top and .div_bottom so that I get only in .div_bottom a scrollbar if it's needed?
In addition I want that the scrollbar in .div_bottom adjusts itself when .div_top gets bigger (in height):
I think the height of .div_top has to be auto because there is a div inside .div_top which can be hidden and shown with jQuery.
#JonasLoerken
This is your second result. How can I fix this?
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
height: 100%;
flex-flow: row nowrap;
overflow: hidden;
}
.Aside {
width: 200px;
background-color: #333;
}
.Main {
flex: 1;
display: flex;
flex-flow: column nowrap;
}
.Main__header {
height: 40px;
min-height: 40px;
background-color: #777;
}
.Main__content {
overflow-y: auto;
}
<aside class="Aside">#Aside</aside>
<main class="Main">
<header class="Main__header">#Header</header>
<section class="Main__content">
<h1 class="Main__content-header">#Scroll</h1>
<p class="Main__content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</main>
Try this:
.wrapper {
height: 100%;
width: 100%;
}
.other-div {
width: 30%;
height: 500px /* User Percent */;
float:left;
background: orange;
display: block;
}
.mother-div {
height: 500px;
width: 70%;
float: right;
background: gray;
}
.top {
height: 30%;
width: 100%;
background: red;
}
.bottom {
height: 70%;
width: 100%;
background: green;
overflow-y: scroll;
overflow-x: hidden;
}
Try it out!
I have to do 3 rows div with scrollable content at the middle row.
Container is absolute position and can't be larger than 100% of the document height.
Container height depends of rows height, and middle row has dynamic height from x to x px.
Can't use max-height: x vh, bacuse of older browser incompatibility.
/* main container can't be larger than 100% of the screen */
.container {
position: absolute;
left: 0;
top: 10px;
width: 250px;
background: green;
max-height: 100%;
}
/* this needs to be scrollable if dynamic content is to large */
.middle-row {
max-height: 90%;
overflow-y: scroll;
background: blue;
}
/* this always needs to be visible */
.last-row {
}
.dummy-large-div {
height: 5000px;
}
<div class="container">
<div class="first-row">some thing</div>
<div class="middle-row">
<div class="dummy-large-div"></div>
</div>
<div class="last-row">
<button>submit</button>
</div>
</div>
Do you have any ideas?
Since you mentioned that you need to support Android 4x - that makes flexbox a viable option (caniuse)
The code also becomes very simple.
Just add the following to the container class
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
and the following to the middle row:
.middle-row {
-webkit-flex: 1;
flex:1;
}
Also, be sure to add -webkit- prefixes to support Android 4.1-4.3
FIDDLE 1 (little content)
FIDDLE 2 (lots of content)
.container {
position: absolute;
display: flex;
flex-direction: column;
left: 0;
top: 0;
width: 250px;
background: green;
max-height: 100%;
}
/* this needs to be scrollable if dynamic content is to large */
.middle-row {
overflow-y: scroll;
background: blue;
flex: 1;
}
<div class="container">
<div class="first-row">some thing</div>
<div class="middle-row">
<div class="dummy-large-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="last-row">
<button>submit</button>
</div>
</div>
You need to specify a height to the .container class. It is auto by default and the content is a relative height.
my code:
<div>
<div class='a'> </div>
<footer></footer>
</div>
a:
position: absolute;
left: 0;
bottom: 0px;
height: 105px;
width: 100%;
margin: 0;
background: #f5f5f5;
border-top: solid 1px #afafb6;
z-index: 900;
footer:
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #F0EEEE;
white-space: nowrap;
it's like this:
-----|---------|
| || |
| a || |
-----| |
| || |
|foo|| |
|ter|| |
-----|---------|
when footer height bigger,how to make div a's height auto smaller.
I tought a way to set footer max-height to 60% ,and a to 40%,but if footer changes ,60% became a bit small
You can use css tables to do this.
FIDDLE 1 and FIDDLE2
Also, you can add a max-height for the footer by wrapping the content in an additional element and setting max-height on that element.
FIDDLE 3 (Be sure to resize the browser window)
Demo
* {
margin:0;
padding:0;
}
html, body {
height:100%;
width:100%;
background: yellow;
}
.wpr {
display:table;
width: 100%;
height: 100%;
}
.a, footer {
width: 100%;
background: yellow;
display:table-row;
}
.a {
background: pink;
height:100%;
}
p {
max-height: 40vh;
}
<div class="wpr">
<div class='a'>a</div>
<footer>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</footer>
</div>