This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
One element's position is absolute, the other's position is relative, which one is the upper
(2 answers)
Why using absolute position causes the div to be on top?
(3 answers)
Closed 2 years ago.
Header has position: sticky, and is followed by some content.
When a following element has position: relative (e.g. Hero in the example below), it overlaps the sticky Header when the page is scrolled.
Why is this happening?
What's the idiomatic way to avoid the overlap?
Is defining a z-index necessary?
body {
margin: 0;
}
.container {
width: 200px;
background-color: #eee;
}
.header {
background-color: #ccc;
height: 40px;
line-height: 40px;
position: sticky;
top: 0;
}
.hero {
background-color: #ddd;
height: 60px;
line-height: 60px;
/* This causes the overlap */
position: relative;
}
<div class="container">
<div class="header">Header</div>
<div class="hero">Hero</div>
<p>
Sed augue lacus viverra vitae congue eu consequat ac. Diam sollicitudin tempor id eu nisl nunc mi. Massa massa ultricies mi quis hendrerit dolor magna eget est. Maecenas sed enim ut sem. Bibendum arcu vitae elementum curabitur vitae nunc. Diam vel quam
elementum pulvinar etiam non quam lacus. Lobortis mattis aliquam faucibus purus in massa tempor. Suspendisse sed nisi lacus sed viverra tellus in. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Eget egestas purus
viverra accumsan in. Massa tempor nec feugiat nisl pretium fusce id. Egestas sed sed risus pretium quam vulputate dignissim. Magna sit amet purus gravida quis blandit turpis cursus in. Integer enim neque volutpat ac tincidunt vitae. Adipiscing commodo
elit at imperdiet dui accumsan sit. Magna ac placerat vestibulum lectus mauris ultrices. A diam maecenas sed enim ut sem. Ultrices eros in cursus turpis massa tincidunt dui. Est ullamcorper eget nulla facilisi etiam dignissim. Convallis tellus id
interdum velit laoreet id donec. Ullamcorper malesuada proin libero nunc consequat interdum varius.
</p>
</div>
You need to add z-index property in .header class if you define position:relative in bottom of any element so you can just remove position:relative from .here class or bottom element of header.
body {
margin: 0;
}
.container {
width: 200px;
background-color: #eee;
}
.header {
background-color: #ccc;
height: 40px;
line-height: 40px;
position: sticky;
top: 0;
z-index: 1;
}
.hero {
background-color: #ddd;
height: 60px;
line-height: 60px;
/* This causes the overlap */
position: relative;
}
<div class="container">
<div class="header">Header</div>
<div class="hero">Hero</div>
<p>
Sed augue lacus viverra vitae congue eu consequat ac. Diam sollicitudin tempor id eu nisl nunc mi. Massa massa ultricies mi quis hendrerit dolor magna eget est. Maecenas sed enim ut sem. Bibendum arcu vitae elementum curabitur vitae nunc. Diam vel quam
elementum pulvinar etiam non quam lacus. Lobortis mattis aliquam faucibus purus in massa tempor. Suspendisse sed nisi lacus sed viverra tellus in. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Eget egestas purus
viverra accumsan in. Massa tempor nec feugiat nisl pretium fusce id. Egestas sed sed risus pretium quam vulputate dignissim. Magna sit amet purus gravida quis blandit turpis cursus in. Integer enim neque volutpat ac tincidunt vitae. Adipiscing commodo
elit at imperdiet dui accumsan sit. Magna ac placerat vestibulum lectus mauris ultrices. A diam maecenas sed enim ut sem. Ultrices eros in cursus turpis massa tincidunt dui. Est ullamcorper eget nulla facilisi etiam dignissim. Convallis tellus id
interdum velit laoreet id donec. Ullamcorper malesuada proin libero nunc consequat interdum varius.
</p>
</div>
This question already has an answer here:
Does CSS Grid have a flex-grow function?
(1 answer)
Closed 3 years ago.
I discovered a bug with Chrome version 75's implementation of flexbox. Hence I wanted to see if the issue persists with grid, but the test will only work if there is a grid property that is similar to flex-grow due to the current structure of my document.
body {
display: flex;
flex-direction: column;
}
header {
/* height is implicitly determined by font-size and padding */
}
main {
flex: 1;
scrollbar-width: none;
overflow-y: auto;
}
::-webkit-scrollbar {
display: none;
-ms-overflow-style: none;
}
footer {
/* height is implicitly determined by font-size and padding */
}
Is there a similar grid property?
You can rely on 1fr to fill the remaining space:
body {
display: grid;
grid-template-rows: auto 1fr auto;
margin: 0;
height: 100vh;
}
header {
padding: 15px;
font-size: 1rem;
background: red;
}
main {
background: green;
overflow:auto;
padding:10px;
}
footer {
padding: 15px;
font-size: 1rem;
background: blue;
}
<header>this is a header</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nulla, tincidunt at laoreet sed, sodales a arcu. Cras cursus diam eget diam venenatis egestas. Sed in massa pharetra, malesuada felis et, posuere nisl. Etiam eget mauris suscipit, consequat leo in, tincidunt lectus. Morbi pellentesque accumsan lectus sed finibus. Vivamus eros mi, eleifend vitae nibh id, vulputate posuere nulla. Integer dictum justo non nunc tincidunt, lacinia faucibus nisl vestibulum. Mauris luctus ultrices diam, at malesuada sem. Curabitur auctor, mauris in fermentum vestibulum, libero velit molestie leo, ut placerat velit ligula vel mauris. Integer tortor purus, sagittis vel libero sed, egestas vehicula velit. Mauris ullamcorper, arcu at facilisis vehicula, lectus lacus scelerisque felis, ut mattis dolor justo ac tellus.
Fusce porttitor turpis eget felis vestibulum viverra. Sed hendrerit nisl interdum tortor suscipit convallis. Donec aliquet massa sapien, ac congue lacus ullamcorper sed. Donec felis lectus, fermentum ut vestibulum sit amet, mattis ac ipsum. Etiam ut purus libero. Mauris maximus sem at ex posuere, at venenatis nisi sollicitudin. Vestibulum consequat sem risus, vitae sodales augue rutrum venenatis. Vivamus varius, lectus consequa
</main>
<footer>this is a footer</footer>
(EDIT: my current code added to bottom of post)
I need to set a value for the height of the div in order for it to hide/scroll overflow properly, but I don't want a div at a specific pixel height. I can solve that by using % or vh units, but I don't actually want to use those units. By that, I mean I don't want my div to always be, for example, 2/3 of the page, because that means the bottom of the div will be a different distance from the bottom of the browser window, like this-
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 90%;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
-I want it to be a consistent distance from the bottom of the browser window,
like this-
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div {
background-color: yellow;
width: 350px;
position: fixed;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
(for visual representation primarily, I am not really using the code itself as an example)
Basically, I want my div to be a variable height and hide/scroll overflow, but always 10px from the bottom.
I think these describe the same problem I'm having:
Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown
Getting a scrollable child div to Vertically fill the remainder of its parent dynamically
The answers there are to use tables or flexbox - are these the only options (without using javascript)?
My code:
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
}
p {
font-size: 9pt;
}
a {
text-decoration: none;
color: black;
}
.container { /*this contains all the divs!!*/
padding: 10px;
}
.header {
}
.name {
float: left;
width: 25vw;
padding-right: 5vw;
}
.about {
width: 65vw;
}
.main { /*this contains divs 'left' and 'right'*/
/*background-color: #CCCCCC;*/
clear: left;
padding-top: 10px;
width: 95vw;
}
.left {
/*background-color: #E6E6E6;*/
float: left;
min-height: 10px;
width: 25vw;
padding-right: 5vw;
}
.hold { /*this is how i tried your solution*/
position: relative;
height: calc(95vh - 10px);
}
.right { /*this is my problem div*/
background-color: #FFFF00;
width: 65vw;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.lorem {
margin-right: 20vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Name </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="name">
<p> Name </p>
</div> <!-- end div name -->
<div class="about">
<p> about </p>
</div> <!-- end div name -->
</div> <!-- end div header -->
<div class="main">
<div class="left">
</div> <!-- end div left -->
<div class="hold">
<div class="right">
<div class="lorem">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat facilisis purus at fermentum. Etiam ultricies iaculis nulla maximus cursus. Maecenas justo nulla, suscipit a dapibus at, lobortis nec mauris. Mauris egestas mi sit amet risus convallis, in hendrerit lorem maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin tempor libero, nec molestie dui tempor sit amet. Aenean molestie ex id nisl venenatis, quis tincidunt lectus porta. Vivamus aliquam lobortis nulla, id porta leo consequat sollicitudin. Ut iaculis neque placerat ipsum placerat tincidunt.
Quisque libero sem, hendrerit quis urna sit amet, mollis venenatis nisl. Morbi vel neque rhoncus, congue purus ac, condimentum nunc. Morbi vestibulum metus nec velit eleifend, ac sodales nulla posuere. Praesent id fermentum massa. Morbi vestibulum lorem nulla, ac vestibulum nunc auctor non. Donec ultricies placerat mauris, at pretium nibh finibus eu. Suspendisse gravida neque nisl, sit amet bibendum ante placerat eget. Sed laoreet suscipit turpis vitae ullamcorper. Mauris quis pharetra eros. Curabitur quis diam non dui elementum facilisis vel ac sem. Duis vitae augue vitae mi pulvinar placerat ut quis purus. Donec sagittis maximus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus pharetra nisi arcu, in laoreet lacus convallis sed. Nam euismod ligula felis, ut laoreet nisl sodales eget. Maecenas cursus, augue vitae suscipit laoreet, purus magna bibendum tellus, sed maximus ex dui ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget aliquet tellus, in viverra sapien. Sed eget urna mauris. Morbi dapibus dolor et felis viverra condimentum sed a nisl. Integer congue cursus ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nulla risus, pulvinar eget odio vitae, scelerisque cursus magna. Nam maximus eros vitae massa euismod, vel tempus felis vulputate.
Nunc blandit massa a nisl viverra, vitae molestie ex rhoncus. Pellentesque finibus luctus nisi. Sed quis luctus metus. Nullam sed augue ultrices, lacinia dolor ac, egestas ante. In non nisi nibh. Sed vitae dui libero. Duis ut ullamcorper urna. Phasellus quis fringilla leo.
Nulla porta tellus ut nibh pharetra dapibus. Mauris ullamcorper egestas aliquam. Cras posuere scelerisque imperdiet. In ultrices, leo eu molestie bibendum, augue dui semper ante, vel faucibus nibh enim sed eros. Mauris ipsum dui, placerat et tincidunt vitae, laoreet vel enim. Praesent at ligula et neque placerat blandit sed vulputate ipsum. Phasellus sodales, odio nec aliquam pretium, augue lacus mattis quam, nec vulputate purus lorem vitae nisi.
Suspendisse nisl ipsum, volutpat ac dapibus at, tincidunt eget nulla. Mauris ornare a nisi ac fringilla. Maecenas leo sapien, vulputate in dictum a, feugiat in eros. Aliquam sit amet sagittis leo. Mauris metus nisl, convallis eget mollis ut, ullamcorper eu tellus. Pellentesque eu dolor tempor, bibendum leo vitae, maximus velit. Aenean volutpat neque sit amet tellus mattis euismod.
Quisque nec vehicula orci. Curabitur varius fringilla risus, convallis tincidunt velit porttitor vitae. Aenean in lacus nec nunc tempor dignissim nec pretium sem. Nullam finibus odio quis metus ornare, in fermentum elit rutrum. Proin vitae dui in metus vehicula sodales. Donec massa neque, suscipit ac est quis, ultrices auctor risus. Cras eu auctor lectus. Nam sagittis vulputate hendrerit. Maecenas consequat odio justo, at malesuada nulla ullamcorper a. Donec arcu tellus, dignissim ut velit vel, consequat scelerisque dolor. Curabitur dictum vel risus quis consequat.
Pellentesque fringilla eu nisi sed tincidunt. Nulla feugiat sit amet purus sit amet cursus. Suspendisse nibh purus, tincidunt eu congue ut, ultricies id lectus. Phasellus convallis in nibh vel molestie. Nunc condimentum congue justo. In congue, turpis at vulputate imperdiet, dolor erat ultricies turpis, vitae egestas est augue in nisl. Ut ut leo diam. Duis vulputate ligula velit, vitae volutpat felis viverra a. Maecenas justo quam, lobortis a placerat ut, ullamcorper ac lorem. Sed eu vehicula odio.
Fusce id mauris ornare, mollis mi at, vulputate turpis. Praesent a risus feugiat, rutrum lacus nec, sodales nisi. Nulla ullamcorper libero pretium lacus accumsan, eu tempor mi porta. In tincidunt porta feugiat. Cras lectus arcu, convallis nec neque ac, vestibulum pretium ex. Curabitur mi ipsum, commodo ut eros eget, fringilla fringilla tortor. Curabitur maximus tellus ut turpis malesuada, auctor semper lectus porta. Suspendisse non sapien sagittis, dapibus tellus et, egestas quam. Aliquam vitae massa sit amet urna rhoncus rutrum sit amet et lorem. Phasellus gravida justo ut vulputate vestibulum.
Nunc sed tempus metus, sit amet volutpat mi. Quisque sed metus rutrum, iaculis enim sed, sodales lacus. Quisque quis mi ac sapien scelerisque efficitur lacinia et nunc. Proin tincidunt scelerisque turpis, non euismod ante interdum at. Sed vitae velit scelerisque, placerat nulla in, egestas justo. Mauris urna orci, pulvinar a nibh a, luctus pellentesque mauris. Nulla faucibus hendrerit urna non venenatis. Quisque nulla mi, suscipit sit amet nunc eu, dictum ullamcorper tellus. Donec lacus libero, commodo quis mauris pellentesque, feugiat iaculis nisl. Nulla facilisi. Suspendisse sed risus quis risus fringilla condimentum. Aenean aliquet in eros vel volutpat. Vivamus malesuada ultrices lorem sit amet feugiat. In interdum leo ac orci sollicitudin, maximus vestibulum nisl gravida. Sed venenatis pharetra fringilla. Etiam mauris risus, cursus et est tristique, mattis venenatis nisi.
</p>
</div> <!-- end div LOREM -->
</div> <!-- end div main -->
</div> <!-- end div hold -->
</div> <!-- end div container -->
</body>
</html>
You're on the right track! You can combine vh with calc to get the desired effect.
height: calc(100vh - 10px) - assuming the element is positioned at the top of the screen, that'll achieve the effect you're describing.
To handle scroll/overflow, you'll need an inner container - a div inside the one you set the height property on. Give that inner div { height: 100%; overflow: auto; } and you should be all set.
Here's a demo - to see it working, use the full screen view and shrink your browser's height.
/* These styles are just to make this easier to see,
and to normalize the display a little. */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page { width: 100px; border: 2px solid; }
/* Here's the box that locks to some distance from the bottom, in this case 30px */
.outer {
height: calc(100vh - 30px);
position: relative;
border: 1px solid blue;
}
/* And here's the scrollable container inside it */
.inner {
height: 100%;
overflow: auto;
}
<div class="page">
<div class="outer">
<div class="inner">
content content content content
content content content content
content content content content
</div>
</div>
</div>
I have a side-bar div that will have ads. It should have a fixed width of about 333px and need it to be responsive is possible in its height.
It has a background but when content loads in the main div the side-bar div will not extend the length of the main content. I have tried a few things but get varied results in different browsers.
When in the mobile view or when it's in a small view the side bar should fit to the size of the window width wise and only be has high as the content in the side-bar.
I have loaded a few images for examples to show what I need.
Below is the ccs I have
.main
{
padding: 20px;
}
.side-bar
{
background-image: url('../images/BlueBG.jpg');
width: 333px;
display: block;
height: 100%;
}
This has been asked a few times on SO, but you can use flexbox for this. If you are using bootstrap, you most likely will have a container-fluid class. Simply set the display to flex and all the items inside will become flex-items. This will allow you to have them stretch. In your case, you will have to set container-fluid back to block or set your main and side-bar to flex-basis:100% in a media query for your mobile.
Here's the fiddle: http://jsfiddle.net/56we9rmj/2/
HTML
<div class="container-fluid">
<div class="main"><p>Arcu dictumst nec ultricies aptent rhoncus. Sed fermentum ligula. Donec vitae felis. Lectus nec ad. Tempus et quam. Nec dolor eu. Lacus at in eu dolor penatibus. Quis vivamus vehicula. Mauris dui ullamcorper diam eget pretium lectus consectetuer ultrices tincidunt sit nulla. Lobortis lacus et. Dolor ea placerat etiam diam aenean integer nec erat. Suscipit ut elementum. Consectetuer dui id vestibulum cras egestas. Quis nulla nulla. Pariatur pellentesque amet taciti neque lorem fermentum vehicula amet elit blandit pellentesque. Cras sit gravida. Cras vulputate curabitur mauris purus semper mauris lacus et et pulvinar in justo nullam qui sed quam massa. Integer amet ullamcorper. Feugiat quis sed quam fusce non feugiat amet vitae. Arcu elementum eget justo ac sed quis id tellus.</p>
<p>Vivamus non cras. Turpis in eleifend mattis nam arcu aliquam vulputate felis. Dignissim ligula dignissim habitant nonummy proin. Mauris varius varius. Purus lorem ullamcorper dictum cras in felis ullamcorper vitae. Nunc amet interdum nec adipiscing tempus ac vestibulum primis. Nisl purus orci sed sunt mauris. Odio donec nulla. Pellentesque arcu felis. Et varius ornare eros id quisque. Vel dui velit arcu eget in dignissim nunc nec habitasse habitasse elit quis ac aptent duis volutpat facilisis varius ut sem consectetuer erat arcu. Mauris condimentum sodales luctus a ullamcorper amet a pellentesque tellus ac sit. Nam mauris nulla neque aenean tempus. Mi dui ipsum. Laoreet vitae mauris. Arcu at tristique. Quia mi praesent nibh eu est. Dui libero condimentum elementum risus risus. Ut feugiat diam. Quam semper erat felis ultricies vel. Sed proin sollicitudin. Etiam eleifend morbi imperdiet purus pharetra. Vel diam feugiat. Vel volutpat vulputate. Enim ligula fringilla at nunc risus.</p>
</div>
<div class="side-bar">
<img src="http://placehold.it/300x100" />
<img src="http://placehold.it/300x100" />
</div>
</div>
CSS
.container-fluid {
display:flex;
align-items:stretch;
align-content:stretch;
}
.main {
flex-basis:66.66666667%;
padding:20px;
}
.side-bar {
background:red;
flex-basis:33.3333333%;
}
.side-bar img {
width:100%;
}
#media screen and (max-width:Mobile-PX-HERE) {
.container-fluid {
flex-wrap:wrap;
}
.main, .side-bar {
flex-basis:100%;
}
}
Hope that helps!
Giving position:absolute; and 100% height to the sidebar will do. http://jsfiddle.net/fdf01y4b/
Resize the window or add more text to see it in action
.side-bar {
height: 100%;
position: absolute;
top: 0;
right: 0;
}
If you have problems with the sidebar going out of the parent div, just give position:relative; to the parent wrapper like I did on the Jsfiddle example
<div class="wrapper">
<div class="main">Content</div>
<div class="side-bar">Sidebar</div>
</div>
.wrapper{
position:relative;
}
For smaller screens you can just remove the sidebar position:absolute; to position:initial; with media queries:
#media (max-width: 600px){
.side-bar{
position: initial;
}
}
I want to have an image floated left, with text to the right that doesn't flow around it, and that falls underneath it when the browser is minimised. Like this:
This is the css I've got at the moment:
.item-container{ margin: 0 20px 20px 25px; }
.directory {display: inline; overflow: auto;}
.directory-image {float: left; margin-right: 17px;clear: left;}
You could add a float:left to the .directory div and give it a width of a certain value.
.directory {
float:left;
width:300px;
}
Like so: http://jsfiddle.net/aMA65/
You could also add a width in percentage to .directory and .directory-image to make it more responsive. (Don't forget img { max-width:100%; height:auto; } )
The trick to this is display: table;
HTML
<div class="wrap">
<img src="http://placekitten.com/150/150">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis ante id enim vestibulum viverra. Suspendisse malesuada justo et elit porttitor condimentum. Sed interdum mi dui, ut consequat risus laoreet quis. Sed quis elit nec arcu consectetur gravida vel eu lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non nisl vehicula, aliquet sem nec, rutrum libero. Maecenas in mi felis. Curabitur et semper justo. Sed vel faucibus massa. Maecenas semper elementum aliquet. Nam mattis elementum fringilla. Etiam suscipit mi ut mauris vehicula, id tempor libero molestie. Vestibulum molestie nulla non adipiscing pretium. Cras volutpat magna auctor, ornare massa at, consequat lectus. Sed ac pharetra metus. Praesent eleifend nisi vitae eros fermentum fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta vehicula augue nec elementum. Phasellus convallis lobortis dolor sed facilisis. Cras nisi elit, porta ac aliquet a, imperdiet eget turpis. Nullam euismod eros urna, in tincidunt enim feugiat id. Sed pharetra odio erat, et rhoncus massa sodales in. Nullam consectetur tortor sit amet ligula mollis, quis gravida eros pellentesque. Morbi eget laoreet mi, non euismod erat. Suspendisse elit est, dapibus a semper sed, molestie venenatis diam. Sed faucibus justo in ipsum molestie, et scelerisque ligula sodales. Vivamus sodales sodales arcu, ut bibendum diam consectetur sit amet. Donec id augue nibh. Nam vel mauris sem.
</div>
</div>
CSS:
.wrap { display: table; width: 100%; }
.wrap img { float: left; }
.wrap .content { display: table-cell; vertical-align: top; }
Then, in a media query:
#media screen and (max-width:600px){
.wrap { display: block; }
.wrap img { float: none; display: block; margin: 0 auto; }
.wrap .content { display: block; }
}
No tables or similar nonsenses needed, just pure CSS with media queries
here's how you can do it, btw re-size your browser under 400px width to see the result
you can change the value as you like for example:
#media only screen and (max-width: 960px) { }
in this case layout change will happen when browser window width is smaller than 960px.
here's the demo:
http://jsfiddle.net/darkosss/SE4p5/
And if you want images to be responsive too, follow the instructions for the "img" tag form the comment above.