I am trying to create a full height responsive site with a sticky fixed height footer and no scrolling. I have this so far...
body, html {
height:100%;
width:100%;
padding:0;
margin:0;
}
.content {
text-align:center;
background:wheat;
height:calc(100vh - 100px);
}
.image_container img {
max-width:100%;
height:auto;
}
footer {
position:fixed;
bottom:0;
height:100px;
background:teal;
width:100%;
color:white;
text-align:center;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
The image is causing everything to scroll, how can I make this image height responsive?
This may helpfull
body, html {
height:100%;
width:100%;
padding:0;
margin:0;
}
.content {
text-align:center;
background:wheat;
height:calc(100vh - 100px);
}
.image_container img {
max-width:100%;
}
.image_container{
height:100%;
}
footer {
position:fixed;
bottom:0;
height:100px;
background:teal;
width:100%;
color:white;
text-align:center;
}
img{
max-height:100%;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
I recently created a similar page and once I had to insert features like scroll-steps and navigation buttons, I found fullPage.
Try fullPage.js - I think it has all the functionality build in you need.
It is quite easy, using flex.
I set .container to be a flexbox, setting .content to a dynamic height of 100% and the footer to a fixed height of 100px.
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.content {
text-align: center;
background: wheat;
height: 100%;
}
.image_container img {
max-width: 100%;
height: auto;
}
footer {
position: fixed;
bottom: 0;
height: 100px;
min-height: 100px;
background: teal;
width: 100%;
color: white;
text-align: center;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
go with this one
just give a
.image_container{height: 100%;}
.image_container img { max-height: 100%; max-width: 100%;}
and you are good to go this approach keep image aspect ratio
as you can see in sample
like this
body, html {
height:100%;
width:100%;
padding:0;
margin:0;
}
.content {
text-align:center;
background:wheat;
height:calc(100vh - 100px);
}
.image_container{
height: 100%;
}
.image_container img {
max-height: 100%;
max-width: 100%;
}
footer {
position:fixed;
bottom:0;
height:100px;
background:teal;
width:100%;
color:white;
text-align:center;
}
<div class="container">
<div class="content">
This is the content
<div class="image_container">
<img src="https://dummyimage.com/500x1000/500/fff">
</div>
</div>
<footer>This Is The Footer</footer>
</div>
Related
I am trying to build a simple full screen layout that resizes an image so that it is only as big as the screen
body, html {
margin:0;
padding:0;
}
.wrapper {
background:teal;
height:100vh;
}
.frame img {
max-width:100%;
height:auto;
}
<div class="wrapper">
<div class="frame">
<img src="https://dummyimage.com/1500x2000/000000/fff">
</div>
</div>
I am expceting the image to fit the screen, however using my example above it doesn't. Where am I going wrong?
try this:
body, html {
margin:0;
padding:0;
}
.wrapper {
height:100vh;
}
.frame img {
height: 100%;
/* max-width: 100% --- if you want it to be max. 100% width of the screen but this will stretch the image */
}
<div class="wrapper">
<div class="frame">
<img src="https://dummyimage.com/1500x2000/000000/fff">
</div>
</div>
if you want a smoth background image for the whole site you can use this:
body, html {
margin:0;
padding:0;
}
.wrapper {
height:100vh;
background-image: url("https://dummyimage.com/1500x2000/000000/fff");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<div class="wrapper">
</div>
You missed to set the size of the frame!
Use full height of the whole container with 100%.
body, html {
height: 100%;
margin:0;
padding:0;
}
.wrapper {
background:teal;
height:100%;
}
.frame{
height: 100%;
width: 100%;
}
.frame img {
height:100vh;
width: 100%;
}
<div class="wrapper">
<div class="frame">
<img src="https://dummyimage.com/1500x2000/000000/fff">
</div>
</div>
I just removed max-width to width at img css.
body, html {
margin:0;
padding:0;
}
.wrapper {
background:teal;
height:100vh;
}
.frame img {
width:100%;
height:auto;
}
<div class="wrapper">
<div class="frame">
<img src="https://dummyimage.com/1500x2000/000000/fff">
</div>
</div>
Fullscreen responsive image background
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
font-family: exo, sans-serif;
}
.wrapper {
height: 100%;
width: 100%;
}
.message {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:45%;
bottom: 0;
display: block;
position: absolute;
background-color: rgba(0,0,0,0.6);
color: #fff;
padding: 0.5em;
}
<div class="wrapper">
<div class="message">
<h1>Responsive background</h1>
<p>Fluid Layout</p>
</div>
</div>
Elements inside .wrapper are not centered aligned and after assigning width to .wrapper, it's showing a horizontal scrollbar.
#footer {
width:100%;
}
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
width: 1024px;
height: 192px;
font-size:a
}
#footer .wrapper .col {
width: 20%;
height: 192px;
background: green;
display: inline-block;
}
<footer id="footer">
<div class="wrapper">
<div class="col right-list">
</div>
<div class="col middle-list">
</div>
<div class="col left-list">
</div>
</div>
</footer>
Any suggestions as to why this is happening?
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
max-width: 1024px;
width: 100%;
height: 192px;
font-size:a
}
you may not set a determined width
Were you looking for something like this:
https://jsfiddle.net/3ux7bdpf/
#footer {
width:100%;
}
#footer .wrapper{
background:red;
margin:0 auto;
position:relative;
height: 192px;
font-size:a
}
#footer .wrapper .col {
width: 20%;
margin-right:10%;
height: 192px;
background: green;
display: inline-block;
}
#footer .wrapper .col:first-child {
margin-left:10%;
}
#footer .wrapper .col:last-child {
margin-right:0;
}
Its is simple. Why you are assigning fixed width to .wrapper
Just put width: 100%; or any width you want respective of footer in %.
Instead Assign Max-width to it. So if browser size is more than max-width than it will adjust accoring to your max-width.
#footer {
width:100%;
}
#footer .wrapper{
max-width: 1024px;
background:red;
margin:0 auto;
position:relative;
width: 100%;
height: 192px;
text-align: center;
}
#footer .wrapper .col {
width: 20%;
height: 192px;
background: green;
display: inline-block;
}
<footer id="footer">
<div class="wrapper">
<div class="col right-list">
</div>
<div class="col middle-list">
</div>
<div class="col left-list">
</div>
</div>
</footer>
I'm trying to create a fluid layout site which also has a left sidebar with the following properties:
It doesn't scroll when the main content does
It takes up the full height of the page
The only layout I have seen is this one: http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/
HTML
<div id="page">
<header id="sidebar">
//SIDEBAR CONTENT HERE
</header>
<article id="contentWrapper">
<section id="content">
//CONTENT HERE
</section>
</article>
</div>
CSS
html {
overflow: hidden;
}
#sidebar {
background: #eee;
float: left;
left: 300px;
margin-left: -300px;
position: relative;
width: 300px;
overflow-y: auto;
}
#contentWrapper {
float: left;
width: 100%;
}
#content {
background: #ccc;
margin-left: 300px;
overflow-y: auto;
}
However I think this is a poor solution because not only does it require negative margins but it also requires javascript.
Is there a better way to achieve this?
Demo
css
#sidebar {
position:fixed;
height:100%;
width: 300px;
background-color: #ccc;
overflow-y: auto;
}
#contentWrapper { /* not using margin */
box-sizing:border-box;
background-color:#eee;
position:absolute;
left:300px;
width:calc(100% - 300px);
min-height: 100%;
}
#contentWrapper { /* using margin */
box-sizing:border-box;
background-color:#eee;
margin-left: 300px;
/*position:absolute;
left:300px;
width:calc(100% - 300px);*/
min-height: 100%;
}
html,body,#page {
width: 100%;
height: 100%;
}
You can do something like this: http://jsfiddle.net/9U2U4/
Demo with lot of Text: http://jsfiddle.net/9U2U4/1/
CSS:
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
}
#page {
height: 100%;
}
#sidebar {
position: fixed;
left:0;
top:0;
bottom:0;
width: 30%;
background-color: #eee;
}
#contentWrapper {
margin-left: 30%;
min-height: 100%;
position: relative;
background: #ccc;
}
#content
{
padding: 10px;
}
HTML:
<div id="page">
<header id="sidebar">// Sidebar</header>
<article id="contentWrapper">
<section id="content">
<p>Text</p>
</section>
</article>
</div>
I have this Tow column page layout || but the problem that the footer is for the whole file
what if I want the footer to be under the right column only as the black footer in this image
I tried to chand the part
footer content
but it didnt came in the place I wanted
<style>
html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
}
#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:60px; /*This must equal the height of your header*/
}
#header{
background-color: #222;
height: 60px; /*This must equal padding bottom of wrap*/
display:block;
padding: 10px;
color: #fff;
}
#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 100%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 80px; /*This needs to match footer height*/
overflow: auto;
}
#side{
background-color: #ccc;
width: 200px;
vertical-align: top;
text-align: center;
padding: 10px 0;
display: table-cell; /*To make sibling columns equal in height*/
}
#side-stuff{
display: block;
}
#content{
background-color: pink;
padding: 20px;
display: table-cell; /*To make sibling columns equal in height*/
}
#content-stuff{
width: auto;
height: auto;
}
#footer{
position: relative;
height: 80px;
margin-top: -80px; /* margin-top is negative value of height */
clear: both;
background-color: #222;
color: #fff;
padding: 10px;
}
</style>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="main">
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
</div>
<div id="content">
<div id="content-stuff">
content stuff
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</div>
Hope this helps
<style>
#wrapper{
margin:0px auto;
padding:0px;
width:1000px;
}
#header
{
margin:0px;
padding:0px;
width:1000px;
height:100px;
background-color:lavender;
}
#content
{
margin:0px;
padding:0px;
width:1000px;
}
#side
{
margin:0px;
padding:0px;
width:250px;
height:700px;
background-color:grey;
float:left;
}
#main
{
margin:0px;
padding:0px;
width:750px;
height:700px;
float:right;
}
#main1
{
margin:0px;
padding:0px;
width:750px;
height:650px;
background-color:pink;
float:right;
}
#footer
{
margin:0px;
padding:0px;
width:750px;
height:50px;
background-color:black;
float:right;
}
</style>
<div id="wrapper">
<div id="header"> Header </div>
<div id="content">
<div id="side">Side</div>
<div id="main">
<div id="main1">Main</div>
<div id="footer">Footer</div>
</div>
</div>
</div>
put the div of the footer inside the div of the side
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
<div id="footer">
footer content
</div>
</div>
I'm trying to get my footer to stick to the bottom of my page. I've followed loads of different tutorials (most of them very similar) on sticky footers, but none of them have worked for me. For some reason the footer sticks to the bottom of the SCREEN instead of the PAGE...
This is the layout of divs in my HTML:
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
This is my CSS:
html, body {
height: 100%;
#wrapper {
min-height: 100%;
position: relative;
}
#content {
position: absolute;
padding-bottom: 300px; (same as footer height)
}
#footer {
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;
}
Try this
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{
min-height:100%;
position:relative;
}
#header {
background:#00ff0f;
padding:30px;
}
#main{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
height:100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="main">
Some Content Here...
</div>
<div id="footer">Footer</div>
</div>
DEMO.
I know this is old but these days you can use flex-box which allows for variable footer height
html, body, #wrapper{
min-height: 100vh;
}
#wrapper{
display: flex;
flex-direction: column;
}
#main{
flex-grow: 1;
}