I am trying to stretch a sticky element to size of the screen. I have the following HTML
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
color:white;
position: sticky;
width: 100px;
height: 100px;
background: black;
}
<div class="header">Header</div>
<div class="large">Content</div>
The problem is that this works but the element is not stretched. If I change width:100px to width:100vw the sticky to the left breaks. So it seems like I cannot specify relative width and use sticky to the left at the same time?
You can achieve this by adding a div around both elements and giving that div a display: inline-block;:
.container {
display: inline-block;
}
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
position: sticky;
width: 100vw;
height: 100px;
background: black;
}
<div class="container">
<div class="header"></div>
<div class="large"></div>
</div>
Related
I'm trying to create an area that contains all my absolutely positioned items. It works great until its sibling has an overflow attached to it. In the example below, when you start scrolling, the child div scrolls as if it's fixed. If you comment out the overflow: auto in the #app CSS, you'll get the desired behavior, but obviously the layout is incorrect. How can I fix this issue without moving the absolute div into the #app div?
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
If you want to use absolute positioning on .absolute you'll have to nest that code within #app and set it to position: relative;. The absolute positioning is referring to its nearest positioned ancestor, in this case, the body element, hence, why it is staying fixed. So you'll have to set #app to relative and it should work just fine.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
position: relative;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
This should also work for you, see changes I made to HTML and CSS below.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: relative;
top: 0;
left: 0;
}
.child {
top: 0px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
color: black;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">Content 1
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
</div>
I have created two div one is with class name .main and the second one is .container.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
position: absolute;
left: 5%;
right: 5%;
top: 25%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
When I am resizing the browser windows vertically the div with the class .container is changing its position. I want it to below the main div.
If you want your div positioned below the .main div (i.e. relative to the .main div), then you should refrain from using absolute positioning and use relative positioning instead. You can also not define a position property - by default it will be set to static, which also works:
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
left: 5%;
right: 5%;
top: 100%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
By default, the .main will be below .container. And position: absolute will remove the element completely out of the document flow.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
margin: 0 5%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
Try this.
I am trying to attach a div to the bottom of the page. This page is not scrollable, but I cannot set top by pixel because it needs to be responsive to screen size. All I want is a div at the bottom of the page that takes up 100% of the horizontal space and 20% of the vertical space.
What I've tried:
Making parent relative and child absolute.
Setting parent's min-height: 100%
Here is my code:
<html>
<head>
<title>Forget It</title>
<link rel="stylesheet" href="../static/styles.css">
</head>
<body>
<div class='parent'>
<div class='ground'></div>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
bottom: 0;
background-color: #2cb84b;
}
Any ideas? Thanks!
Just apply width: 100%; to .ground to make the div take full width.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
background-color: #2cb84b;
}
<div class='parent'>
<div class='ground'>footer</div>
</div>
I'm trying to make a centered div with another div on the right of it. So the div on the left is horizontal centered. De div on the right is directly on the right of the centered div. I've tried it in many ways with different displays and margins etc but I can't seem to figure it out.
All tips are welcome!
div {
width: 100px;
height: 100px;
display: inline-block;
}
#left {
left: 50%;
background: #009a9a;
}
#right {
background: #bbad4f;
}
<div id="left"></div>
<div id="right"></div>
You can do it with the Flexbox and positioning:
.flex-container {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
position: relative;
}
.flex-container > div {
width: 100px;
height: 100px;
}
#left {
background: #009a9a;
}
#right {
position: absolute;
left: 50%; /* moved right by half of the parent's width */
transform: translateX(50%); /* and half of its own width */
background: #bbad4f;
}
<div class="flex-container">
<div id="left"></div>
<div id="right"></div>
</div>
No matter the divs width (as long as they stay the same), this solution is dynamic, therefore no unnecessary margins or calc().
But with the help of CSS variables you can make it completely dynamic:
:root {
--leftWidth: 200px;
}
.flex-container {
display: flex;
justify-content: center;
position: relative;
}
.flex-container > div {
width: 100px;
height: 100px;
}
#left {
width: var(--leftWidth);
background: #009a9a;
}
#right {
position: absolute;
left: calc(50% + (var(--leftWidth)/2)); /* moved right by half of the parent's and sibling's width */
background: #bbad4f;
}
<div class="flex-container">
<div id="left"></div>
<div id="right"></div>
</div>
body,
html {
height: 100%;
font-size: 0;
}
div {
width: 100px;
height: 100px;
display: inline-block;
}
#left {
left: 50%;
top: 50%;
position: relative;
transform: translate(-50%, -50%);
background: #009a9a;
}
#right {
background: #bbad4f;
left: calc(50% + 100px);
top: calc(50% + 100px);
position: relative;
transform: translate(calc(-50% - 100px), calc(-50% - 100px));
}
<div id="left"></div>
<div id="right"></div>
Here another example if you can't use transform or if you don't know elements size. You can do it with flexbox or just just by using margin: auto to center the first element.
.Container {
display: flex;
justify-content: center;
}
.Left {
background-color: red;
position: absolute;
left: 100%;
top: 0;
}
.Centered {
background-color: cyan;
position: relative;
}
/* Demo only */
.Centered, .Left {
border-radius: 4px;
padding: 8px 24px;
}
<div class="Container">
<div class="Centered">
<div class="Left">Right</div>
Centered
</div>
</div>
This is using absolute positions. Please not that the amount of left:150px; is the half width of centered div + half width of left div. Also the style margin-left:200px; on the lef div, comes from the width of centered div.
.container {
position: relative;
}
.centered {
width: 200px;
background: #eeeeee;
position: absolute;
height: 100px;
margin: auto;
left: 0;
right: 0;
}
.leftOf {
background: #ff8800;
position: absolute;
left: 150px;
margin-left: 200px;
height: 100px;
width: 100px
}
<div class="container">
<div class="centered"></div>
<div class="leftOf"></div>
</div>
There is a block with header, body and footer parts inside of it. Header and footer heights are fixed, body height is determined by its content. I need the outer block size to be the size of its contents but not more then the size of its container. If the body height exceeds maximum possible size, then the y-scroll is shown for body, but header and footer stay at the top and bottom of outer block.
I made the FIDDLE. But I could only get as far as when I resize window the scroll appears for outer block, not for body block only.
This is CSS and HTML:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
max-height: 100%;
overflow: auto;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
}
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>text<br>...</div>
<div class='footer'></div>
</div>
</div>
Is it possible to do what I need without using JavaScript?
EDIT: I made an image to make it clear what I need.
Well Here is your code from what I understand that you want the header
sticks to top and footer in the bottom and you can scroll the body if
necessary in the container size.
<div class='container'>
<div class='innerContainer'>
<div class='header'></div>
<div class='body'>text<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>text
</div>
<div class='footer'></div>
</div>
</div>
We need to style the footer and header separately plus your style as you will see in the code below
So you add to .innerContainer (position: absolute; bottom: 0; right: 0; left: 0; height: 100%; overflow: hidden;) and for the .body you add(height: 50%; overflow-y: auto;)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
}
.innerContainer {
border: 1px solid purple;
height: 100%;
max-height: 100%;
overflow: hidden;
bottom: 0;
top: 0;
right: 0;
left: 0;
position: absolute;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
background: green;
min-height: 20px;
max-height: 36%;
overflow-y: auto;
font-size: 20px;
}
I hope that what you want and if you have any question please let me know.
The only solution I've found is using CSS3 calc. Doesn't work in Android browswer, though... FIDDLE
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 10px; bottom: 10px; left: 10px; width: 200px;
border: 1px solid red;
overflow: hidden;
}
.header, .footer {
height: 30px;
background: blue;
}
.body {
height: 300px;
background: green;
}
.bodyContainer {
max-height: calc(100% - 60px);
overflow-y: auto;
}
<div class='container'>
<div class='header'></div>
<div class='bodyContainer'>
<div class='body'></div>
</div>
<div class='footer'></div>
</div>