Related
I have two columns, both 50% of the screen-width. The left column is filled with text, the right column has an image that scales to the height of the text. Another image is placed over this first image, positioned in the bottom right corner. Even if the screen-width exceeds the image-width (and whitespace appears to the right of the image), the second image should stay aligned to the bottom right corner of the first one.
The setup you can see in the code below works in browsers other than Firefox. In Firefox, the second image is positioned as far right as possible, up to the original width of the first image. I think I've narrowed it down to the 100% height I give .image div, if I use a fixed height (i.e. 400px), the second image is aligned correctly. I need the percentage height though, to let the first image scale to the text height.
.wrapper {
overflow: hidden;
position: relative;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
You can see how it works in Codepen.
Any help would be appreciated.
It has to be a bug on firefox. Your code seems to be working under 1170px. So I have come up with a quick fix, I don't know whether it's applicable in your case or not.
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
overflow: hidden;
position: relative;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
.big-wrapper {
margin-left: auto;
margin-right: auto;
}
<body class="big-wrapper">
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
</body>
Update
This second version, Demo 2, has been stripped of all flex, fixed position, and even intrinsic measurements (vw). Firefox works and even IE surprisingly.
Changed the background-color to make it look spacier.
Major Changes
Added html,body {height:100%;width:100%}
.wrapper needed 100x100% as well.
Now .image and .text has a parent that their percentages can relate to.
Gave .image min-height:100%
Removed both <img> and used background-image
Optional Changes
Made .wrapper position:fixed
Made .text and .image position:absolute
.wrapper is a flex container
.wrapper has overflow-y:scroll so at smaller widths, text can still be read and it's scroll instead of auto so there be no jumpy behavior when the scrollbar pops in and out.
I also edited Marv as a PNG with a transparent background. P38 modulator not included.
Demo 1
html,
body {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 49vw;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
flex: 0 1 auto;
}
.image {
min-width: 49vw;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
flex: 1 0 auto;
}
.marv {
background: url("https://image.ibb.co/h1pCQy/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>
Demo 2
html,
body {
height: 100%;
width: 100%;
background-color:#000;
color:#fff
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 50%;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
}
.image {
min-width: 50%;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
}
.marv {
background: url("https://image.ibb.co/hioYDJ/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>
You can add this code below your CSS to fix on Firefox. But it is only true if the image does not resize in width. So you can mix with #media to use.
#-moz-document url-prefix() {
.image div {
display: ruby-base;
}
.image div:after {
overflow: hidden;
}
}
I checked your code please replace image style rules as below:
.image > div > img {
display: block;
height: 100%;
width: 100%;
}
And after rules as below:
.image div:after {
content: url(https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg);
display: block;
position: absolute;
bottom: -100px;
right: -60px;
/* width: 100px; */
/* height: 120px; */
}
I tested in both chrome and firefox, it works.
The sticky footer pattern ensures that the footer sticks to the bottom of the viewport unless the non-footer content is tall enough in which case it is pushed below the bottom of the viewport.
The following application of this pattern works for Chrome and Opera but not Firefox. Am I missing anything?
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Surprisingly, even though it works from Chrome (when I place the HTML in a file) it's not displayed properly in the Stack Overflow's HTML pen facility in full page mode — even though I'm still using Chrome. What is observed instead is that the footer rises from the bottom of the viewport. This is the exact same failure mode that is observed under Firefox.
You might want to look into the vh unit coupled with display: flex...
html,body {
margin: 0;
padding: 0;
}
.container {
min-height: 100vh; /* make the container at least the height of the viewport */
display: flex; /* use flexbox */
flex-direction: column; /* use a vertical flex layout */
}
.content {
flex-grow: 1; /* expand to fill remaining container height */
background-color: #e9e9e9;
}
.footer {
background-color: #ccc;
height: 100px;
}
<div class='container'>
<div class='content'>
<h1>Content</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus
ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</div>
<div class='footer'>Footer</div>
</div>
Set your html, body height to 100%
html, body
{
height:100%;
}
html, body
{
height:100%;
}
#container {
min-height: 100%;
position: relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px;
/* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis
purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Pointers: Sticky Footer - CSS Tricks
Based on this answer I ended up adding the following mozilla-specific fix:
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
95% is necessary as if 100% is specified, then the bottom of the footer gets cropped in Firefox (no idea why).
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
<a href='https://stackoverflow.com/q/46552641/274677'>SO question</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
This works in Firefox as well but not as a Stack Overflow HTML/CSS snippet (when in full screen mode).
I have a web site with fixed background image.
When scrolling, This image is recovered by a text block.
Keeping scrolling, the text block goes up and another background image is revealed.
Scrolling again and another text block recover the fixed background image... etc.
I got some codes on the internet to do that and all this works.
I want my background to fit the width of the screen responsively.
My problem is I can make my image resize correponding to the width size of the browser, BUT the div block containing the image fit the height of the browser. Let's say, on mobile device I have my little image at the top of my page, and nothing below, unless I scroll... then the text block comes up on he screen and recover the BG image...
So I would like my BG image fit the width of the browser and the div fit the height of the image...
Is that possible or should I change my design?
Thanks a lot.
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "Roboto", sans-serif;
color: #3d3536;
background-color: #1f1f1f;
}
body, html {
/* important */
height: 100%;
}
a {
color: #b4d7a8;
text-decoration: none;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 768px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
/* --------------------------------
Main components
-------------------------------- */
.cd-main-content {
/* you need to assign a min-height to the main content so that the children can inherit it*/
height: 100%;
position: relative;
z-index: 1;
}
.cd-fixed-bg {
position: relative;
min-height: 100%;
width: auto;
/*background-size: cover;*/
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center 52px;
z-index: 1;
background-attachment: fixed;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 90%;
max-width: 1170px;
text-align: center;
font-size: 30px;
font-size: 1.875rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: white;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-2 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-3 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-4 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
#media only screen and (min-width: 768px) {
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 36px;
}
.cd-fixed-bg {
/*background-position: center 70px;
/*height: 100%; */
}
}
#media only screen and (min-width: 1170px) {
.cd-fixed-bg {
/*background-attachment: fixed;*/
background-position: center 70px;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 48px;
font-weight: 300;
}
}
.cd-scrolling-bg {
position: relative;
min-height: 100%;
padding: 4em 0;
line-height: 1.6;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.cd-scrolling-bg.cd-color-1 {
background-color: #3d3536;
color: #a6989a;
}
.cd-scrolling-bg.cd-color-2 {
background-color: #99a478;
color: #3d3536;
}
.cd-scrolling-bg.cd-color-3 {
background-color: #b4d7a8;
color: #3d3536;
}
#media only screen and (min-width: 768px) {
.cd-scrolling-bg {
padding: 8em 0;
font-size: 20px;
font-size: 1.25rem;
line-height: 2;
font-weight: 300;
}
}
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<main class="cd-main-content">
<div class="cd-fixed-bg cd-bg-1">
<!--<img src="img/HEADER.png" class="cd-fixed-bg">-->
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-2">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-2">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-3">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-3">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
</main> <!-- cd-main-content -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
The height of the div seems to be affected by the amount of text. As the screen size gets less wide, the text in the div takes up more vertical space. Try changing the min-height of the div to either a different percentage at that size. You can also try adding a max height giving the height a range of how large it should be.
I have two questions.
First, which css rule will make a div be highlighted in the Chrome Inspector? All I know is that float: left, and overflow: hidden will make a div show up/highlighted in the Inspector. For example, in the code in the link below, when you use Chrome Developer Tools, and click/hover on <div class="center">, the area that was supposed to be highlighted didn't show. If you click/hover on <div class="content"> or <div class"image"> you can see the area that are highlighted in light blue.
Secondly, How do I keep the image stick to the bottom of the responsive div with content inside?
HTML
<div class="center">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.
Suspendisse ac porttitor purus. Duis consequat condimentum tincidunt. Donec rhoncus maximus diam, ac bibendum neque mollis vitae. Vivamus vel mauris vel ex vulputate porta. Praesent convallis elit odio, et vehicula quam vulputate vitae. Aliquam porttitor porta justo sed semper. Nunc tristique tellus arcu, id vestibulum mi gravida id. Nulla a interdum dolor. Aenean mollis purus ac sagittis semper. Nulla ipsum neque, blandit eu tempus eget, condimentum id erat. Mauris vitae nibh in arcu ultrices porta ut id nisi. Donec dapibus eros vulputate magna ultrices bibendum. Fusce libero dui, malesuada eget gravida ut, semper vel mi.
Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
</div>
<div class="image">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
</div>
</div>
CSS
.center {width: 100%; position: relative; display: block; margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; }
.content {width: 50%; float: left; position: relative;}
.image { width: 50%; float: left; position: relative; height: 400px;}
.image img { position: absolute; bottom: 0; right: 0; vertical-align: bottom;}
#media (max-width: 979px) {
.content {width: 100%; float: left; position: relative;}
.image { width: 100%; float: left; position: relative;}
}
Code in action: http://codepen.io/kikibres/pen/MwBxBK
As you can see, for the image to stick to the bottom of the div, I need to specific the height of the div for the image to work. Otherwise, it just sit out of div on top / outside of div. How do I make it stick to the bottom while making the height responsive?
Additionally, if you use Chrome Inspector / Developer Tools on this code at codepen, you can also see that <div class="center"> isn't highlighted.
Ok here's my answer.
Please take a look at this fiddle first.
Answer to Question 1:
I believe it happens because of the wrong css usage. if you use float left, It won't take space unless it is cleared by using clear: left;.
Or you can use overflow: hidden on the parent container of the element with float:left.
Answer to Question 2:
Sorry but I have to remove unnecessary css to make the image stick to bottom in smaller screen. You can also achieve this using other approach but this is the easiest way for me.
html,
body{
padding: 0;
margin: 0;
}
.center {
width: 100%;
margin: 50px 0;
padding: 15px;
background-color: #63103C;
color: #fff;
overflow: hidden;
}
.content,
.image {
width: 50%;
float: left;
}
#media (max-width: 768px) {
.content,
.image{
float: none;
width: 100%;
}
}
Position image at bottom of variable height div is a very good answer to my question. I just couldn't find it at first when I was searching for an answer before I post this question...
The key is .clear { clear: both; } in which you put <div class="clear"></div> after the first two divs inside the main div.
HTML
<div class="center">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non ultricies justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere cursus dolor, ac porta mauris aliquam non. Maecenas gravida nisl et justo iaculis commodo. Donec neque diam, molestie id enim et, suscipit ultricies lorem. Aliquam ac viverra est. Cras a quam sodales, imperdiet mi id, congue nunc. Integer tortor sem, feugiat gravida pellentesque auctor, scelerisque vel leo. Donec ut dui posuere, pulvinar enim et, venenatis purus. Pellentesque malesuada tellus sit amet orci rhoncus dictum. Quisque vel mi rutrum, sagittis erat sit amet, laoreet justo.
Nunc lorem ex, lobortis eget felis sit amet, elementum iaculis odio. Etiam placerat blandit augue, eu tincidunt leo venenatis non. Aliquam vel tincidunt sem. Donec eleifend aliquam interdum. Donec dictum urna vitae leo tincidunt, placerat ultrices ipsum pellentesque. Phasellus ut elementum nulla, eu aliquet velit. Ut eget dapibus nibh. Donec eu neque eget tortor tincidunt viverra. Aenean non tortor vel nisi laoreet tincidunt. Sed ultrices imperdiet justo, vel volutpat leo elementum ut. Ut interdum venenatis arcu nec ullamcorper. Pellentesque consequat quam eu felis hendrerit, non suscipit orci congue. Vivamus porttitor luctus pellentesque.
</p>
</div>
<div class="image">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
</div>
<div class="clear"></div> <!-- Where you should put it -->
</div>
CSS
.center {width: 100%; position: relative; background-color: #dd1a83; }
.content {width: 50%; float: left; position: relative;}
.image { width: 50%; float: left; }
.image img { position: absolute; bottom: 0; right: 0; border: 3px solid #000;}
.clear { clear: both; } /* Don't forget to put it there too*/
#media (max-width: 979px) {
.content {width: 100%; float: left; position: relative;}
.image { width: 100%; float: left; position: relative;}
}
This code works in Chrome as I want but not in IE or Firefox. To be more clear and satisfy SO constrains about the comment-code ratio in a post I'd like that only the content area being scrollable when the viewport goes bellow 300px or the content simply does not fit. Actually IE is my only concern. How could I achieve the same behavior under IE >= v10.
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
overflow: hidden;
}
#table {
display: table;
height: 100%;
width: 100%;
}
.navBar {
width: auto;
height: 72px;
overflow: auto;
border-bottom: 1px solid #bbb;
display: table-row;
}
.results {
background: gray;
width: 100%;
height: 100%;
overflow: auto;
display: table-row;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
<body>
<div id="table">
<div class='navBar'>header</div>
<div class='results'>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at
venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque
ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis
lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a
venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales
leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend
sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
</div>
<footer>footer</footer>
</div>
</body>
What do you think?
Is it a solution? I got the idea from here
<div class="table">
<!-- Header -->
<div class="row header">Header</div>
<div class="row content">
<!-- Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. -->
<div class="wrapper">
<div class="inner-content">
<input type="text" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
<div>Some text.</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row footer">Footer</div>
html, body {
height: 100%;
max-height: 100%;
padding:0px;
margin:0px;
}
.table, .row {
outline: none;
border: none;
outline-style: none;
vertical-align: top;
text-align: left;
}
.table {
border-collapse: collapse;
display: table;
table-layout: fixed;
/* This will ensure the cells within the table will keep there width. */
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
}
.header {
background-color: red;
}
.content {
height: 100%;
}
.footer {
background-color: green;
}
.wrapper {
position:relative;
height: 100%
}
.inner-content {
overflow: auto;
position: absolute;
top: 0;
right:0;
bottom: 0;
left: 0;
}
#media screen and (max-height: 300px) {
.footer {
display: none !important;
}
}
I'm not entirely sure what you mean by "only content area being scrollable". This was my interpretation of it:
http://jsfiddle.net/5q1Lgsy6/11/
By using a position: fixed width:100% top bar you can make it so that only the content below it will be scrollable.
I ditched all display: table tags, you don't really need them to organize your content unless that content is supposed to be displayed on an actual table.
Here's the CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#table {
height: 100%;
width: 100%;
}
.navBar {
background-color: white;
top: 0;
width: 100%;
height: 72px;
border-bottom: 1px solid #bbb;
position: fixed;
}
.results {
margin-top: 72px;
background: gray;
width: 100%;
height: 100%;
overflow: auto;
}
.results > div {
height: 100%;
overflow: auto;
}
#media screen and (max-height: 300px) {
footer {
display: none;
}
}
EDIT: if you also want the footer to be permanently fixed add this to your CSS:
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
background-color: white;
}
there is a way to write css for IE
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}