This bootstrap grid is working fine,i have two divs in a row. Now i need my reply-container to be fixed(sticky). When i set position: fixed; it is affecting element's width givind some additional width. With position sticky when i set height: 100%; sticky behaviour works good but element is not 100% height, but when i set min-height element is full height but it is not sticky anymore, its just normal element. How can i have sticky div with full height?
<template>
<div class="container-full">
<div class="row">
<div class="col-8">
<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
</div>
</div>
</div>
<div class="reply-container col-4">
<h1>Replies</h1>
</div>
</div>
</div>
</template>
<style scoped>
.tweets-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.tweet-card {
background: #fff;
border-radius: 5px;
padding: 3px 6px;
min-height: 125px;
border: 1px solid #6e6b7b;
}
.reply-container {
background: #fff;
position: sticky;
right: 0;
top: 0;
height: 100%;
/*min-height: 100%;*/
}
</style>
Quikly after posting the question, i solved this with height: 100vh; insted of
height: 100%;
Related
<div id="wrapper">
<div id="overlay">
This is full width/height and absolutely positioned
</div>
<div id="content">
This should be the size of #overlay MINUS the size of #second-element
</div>
<div id="footer">
This has a variable height based on its own content
</div>
</div>
#content can be easily aligned to the #wrapper with
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
However, is there a way to align it to #content? (Since its height depends on the variable #footer's height)
Note: #footer MUST stick to the bottom of #wrapper, and it should not add additional space.
I'm not quite sure what this is supposed to look like but rather than absolute positioning, you can layer elements using CSS-Grid by assigning them the same grid location.
* {
margin: 0;
padding: 0;
}
#wrapper {
display: grid;
height: 100vh;
background: lightblue;
grid-template-rows: 1fr auto;
}
#footer {
background: lightgreen;
width: 100%;
}
#overlay,
#content {
grid-row: 1;
grid-column: 1;
}
#overlay {
background: orange;
width: 100%;
height: 100%;
}
#overlay {
background: orange;
width: 100%;
height: 100%;
}
#content {
background: rgb(255, 255, 0, .5);
width: 75vw;
justify-self: center;
display: grid;
place-items: center;
}
<div id="wrapper">
<div id="overlay">
This is full width/height and absolutely positioned
</div>
<div id="content">
This should be the size of #overlay MINUS the size of #second-element
</div>
<div id="footer">
This has a variable height based on its own content
</div>
</div>
I have a simple grid layout, that has a limited height and scrolls.
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
The padding is being applied at the top, left and right of the grid:
But when I scroll down, the padding on the bottom isn't applied:
If I remove the max-height the padding at the bottom is now applied:
Why isn't the bottom padding being used? How can I ensure padding works on a grid item with limited height?
Clarity around overflow and padding is a current issue in the CSS spec and the behavior may differ based on each case.
Until the spec is clarified or browsers change their behavior, a workaround for your use case is to add an empty element at the end (since your padding is equal to the gap).
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
.outer::after {
content:"";
height:0.1px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
You need to wrap the inner content with a div/container and give the container the grid display, in that case the padding will be applied on that div.
.outer {
border: 1px solid red;
max-height: 150px;
overflow-y: scroll;
}
.outer-content {
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
HTML
<div class="outer">
<div class="outer-content">
<div class="inner">one</div>
<div class="inner">Two</div>
</div>
</div>
Consider this…
You are creating three column layout using grid system. Your container is fixed sized and centered using margin:0 auto.
Your design specs calls for first column to have background color that extends to the left edge of browser.
Any idea how you can achieve this? I could make it work this way, which is kind of a hack and it may not work for certain kind of image backgrounds.
HTML:
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3<h2>
</div>
</div>
</section>
</main>
CSS
main {
min-width: 800px;
}
section {
background-image: linear-gradient(to right, #dfdfdf 50%, #fff 50%);
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin:0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section > * {
min-height: 200px;
}
.container > div {
background-color: #fff;
padding-left: 30px;
}
You could also generate the background using a pseudoelement.
The left value is large enough to keep the background extending out of the screen. It may be problematic if you need precise position of a background image.
Also, you could consider grid-gap instead of adding padding-left to the grid items.
body {
margin: 0;
}
main {
min-width: 800px;
}
section {
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section>* {
min-height: 200px;
}
.container>div {
background-color: #fff;
padding-left: 30px;
}
header {
position: relative;
}
header:before {
content: '';
background: lightgrey;
display: block;
position: absolute;
left: -50vw;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
}
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>
You could try making the columns stretch the full width of the container, and then aligning the content inside to appear as three centered columns.
.container {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-column-gap: 20px;
min-height: 50px;
}
header {
background-color: lightgray;
display: flex;
justify-content: flex-end;
}
section {
border-bottom: 1px solid #dfdfdf;
}
body {
margin: 0;
}
p { text-align: center;}
p > span { padding: 5px; background-color: aqua; }
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>
<p><span>True Center</span></p>
codepen demo
I am currently trying to figure out a way to be able to have a layout that has a bottom-up, content-oriented resizing behavior.
I have the following situation: https://codepen.io/Flash1232/pen/JJYPVQ
What is wrong here is obviously that the wrapper divs do not wrap around the table divs. Now is there any solution for this involving just plain CSS and HTML or do I have to write something in JS like "set wrapper width to the width of its inner div"?
Thanks in advance for any clues!
Man i solved my problem with display:flex on parent element :)
You may want to consider using a flexbox. Please see below. If there is anything that needs to be different, just let me know.
.outer-div {
position: absolute;
background: black;
width: 800px;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
padding: 10px;
}
.area {
overflow: auto;
display: flex;
border: 5px solid red;
background: white;
margin: 10px 40px 10px 10px;
}
.column {
background: green;
border: 5px solid blue;
}
.wrapper {
display: flex;
border: 5px solid yellow;
justify-content: center;
align-items: center;
}
.table {
white-space: nowrap;
}
.violet {
background: violet;
width: 120%;
height: 80px;
}
.red {
background: red;
width: 150%;
height: 80px;
margin-bottom: 20px;
}
.icons {
Background: yellow;
float: right;
height: auto;
width: auto;
}
<div class="outer-div">
<div class="area">
<div class="column">
<div class="wrapper">
<div class="table red">
<span>***Table Content***</span>
</div>
</div>
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
<div class="column">
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
</div>
<div class="icons">
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
</div>
</div>
You should read the definition of the width attribute.
https://developer.mozilla.org/en/docs/Web/CSS/width
Percentages: refer to the width of the containing block
If you set width to 150%, you explicitly say, that the child should be bigger than the parent. You can not expect, that the parent has the same width like the child, if you force the child to be wider.
I've two floated DIVs (two columns) which are nested in an "clear-float"-DIV, which itself is nested in an centered DIV ("wrapper" DIV).
<div id="content">
<div class="block2">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
The right column has min-width and max-width CSS option set. But the wrapper DIV, which has min-width and max-width also, is always expanded to max width.
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
}
.block {
overflow: hidden;
_overflow: visible;
_overflow-x: hidden;
_height: 0;
}
#slot_left {
width: 200px;
background: #ff0;
float: left;
position: relative;
}
#slot_right {
float: left;
background: #cc0;
min-width: 100px;
max-width: 150px;
position: relative;
}
What's the reason for that? I want the wrapper DIV to has minimum width required but to be centered on screen.
Here is an fiddle.
use display:inline-block
why this is happening?? div is by default block level element, so when you have given max-width, it will always obey it to occupy max area possible....
http://jsfiddle.net/sHB7g/3/
CSS
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
display:inline-block
}
.block {
display:inline-block;
overflow: hidden;
border:1px solid #000;
}
http://jsfiddle.net/sHB7g/1/
#content {
display: inline-block;
}
and then added a content wrapper
#contentwrapper {
text-align: center;
}
the html then is like this
<div id="contentwrapper">
<div id="content">
<div class="block">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>