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>
Related
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>
How i give 100% height to div when i give height 100% (It's not working) then i give height 100vh then min-height 100vh but it create extra space and div become more larger than required i also try max-height but not working. i want to give height 100% of element that any any small device it. In this example height is become greater than screen and make a scroll. how i get only 100% with out scroll with out missing any element.
<!doctype html>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
<style>
.header
{
width:100%;
height:60px;
background:#000;
}
.main
{ width:100%;
min-height:100vh;
background:#C00;
}
#footer
{width:100%;
height:100px;
background:#0C3;
}
</style>
You can use calc() to take off the values of header and footer:
body {margin:0}
.header {
height: 60px;
background: #000;
}
.main {
min-height: calc(100vh - 160px);
background: #C00;
}
#footer {
height: 100px;
background: #0C3;
}
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
you can try like this
you have to give the parent always a defined height if not it is not working if you work with %
body{
margin:0;
height:100vh;
}
.header {
width: 100%;
height: 60px;
background: #000;
}
.main {
width: 100%;
height: calc(100% - 160px); /* here you calculate the 100% minus the 60px of the header and 100px of the footer*/
background: #C00;
}
#footer {
width: 100%;
height: 100px;
background: #0C3;
}
<body>
<div class="header">asas
</div>
<div class="main">
</div>
<div id="footer">
</div>
</body>
If you don't need Internet Explorer then you could use flexbox
body {
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1;
background-color: cyan
}
.header {
background-color: red;
padding: 10px;
text-align: center;
}
.footer {
background-color: green;
padding: 10px;
text-align: center;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="main">Content</div>
<div class="footer">Footer</div>
</div>
First of all I'd like to say that I am new to all this. So, here is my situation.
I have set a background image for my entire body.
I have a div .wrapper that I include in all my pages. It's main purpose is to keep my content centered and organized. It's background color is set to grey.
Inside the div .wrapper there is another div .example.
I want this particular div .example to take the background-image of the body and not the color of the .wrapper, but still keep the rest of the .wrapper's properties. Is it possible? I tried no to set the background-image of the .example the same as the body's because I think it shows like a "foreign" object...
<html>
...
<body>
<div class="wrapper">
<div class="example">
<img src="example.png">
</div>
</div> <!-- Wrapper -->
</body>
</html>
body {
background: #ffffff url("bg.jpg") repeat;
background-size: 4%;
background-position: center;
}
.wrapper {
width: 80vw;
margin: auto;
padding: 0px 0px;
background: #e9eaed;
display: block;
}
.example {
width: 100%;
/* background-color: #f6c5b6;*/
}
.example img {
width:40%;
margin: 40px auto;
display: block;
}
The Only way to achieve this is to build your div around it.
.body {
background-image: url('http://placekitten.com/g/40/40');
width: 500px; height:700px; background-repeat:repeat;
}
.wrapper {
width:300px; height:50px; background:grey; margin:0 auto;
}
.mask {
width: 300px; height:100px; margin:0 auto;
}
.left {
width: 50px; height:100px; float:left; background:red;
}
.right {
width: 50px; height:100px; float:right; background:red;
}
<div class='body'>
<div class="wrapper">
box 1
</div>
<div class="mask">
<div class="left">
box 2
</div>
<div class="right">
box 3
</div>
</div>
<div class="wrapper">
box 4
</div>
</div>
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'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;
}