I am learning CSSGrid and I require that in a responsive view the widgets are aligned to the center but I can not do it.
This is my code:
grid-template-areas: "header header header"
"contenido contenido sidebar"
"widget-1 widget-2 sidebar"
"footer footer footer";
.contenedor .sidebar {
/* grid-column: 3/4; */
background: #faa43d;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
/* grid-row: span 2; */
min-height: 100px;
grid-area: sidebar;
}
.contenedor .widget-1,
.contenedor .widget-2 {
background: #55a8fd;
color: white;
height: 100px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.contenedor .widget-1 {
grid-area: widget-1;
}
.contenedor .widget-2 {
grid-area: widget-2;
}
I use media query for the responsive view where I indicate the "contenido" class occupies 3 columns and the sidebar also but the problem is that the widget uses 2 columns so it does not occupy the 3 columns of my Grid. I can solve it by using a point in the media query in the area of the widget.
But I do not know how to center them since the point occupies a space that would be the 3rd so it does not allow me to center them
#media screen and (max-width: 768px){
.contenedor {
grid-template-areas:
"header header header"
"contenido contenido contenido"
"sidebar sidebar sidebar"
"widget-1 widget-2 ."
"footer footer footer";
}
}
Attached image of how it looks when the media query comes in. Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Layout CSS-GRID</title>
</head>
<body>
<div class="contenedor">
<header class="header">
<h2>HEADER</h2>
</header>
<main class="contenido">
<h1>Contenido</h1>
<p>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
<br><br>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
<br><br>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit.
Dolores, ullam.
Repellat eaque unde quam aliquid porro,
consequatur non dolorum corporis nulla,
consequuntur accusantium,
blanditiis accusamus aut exercitationem
placeat eligendi quis!
</p>
</main>
<aside class="sidebar">
<h3>Sidebar</h3>
</aside>
<div class="widget-1">
<h3>Widget 1</h3>
</div>
<div class="widget-2">
<h3>Widget 2</h3>
</div>
<footer class="footer">
<h3>FOOTER</h3>
</footer>
</div>
</body>
</html>
Related
Left side there is a menu, right side the content.
A flex box is used. Why menu scroll, if I scroll in right side? Why it is not keep fixed? How can I fix it?
CSS is inline in React.js.
const DashboardLayout = ({ children }: Props) => {
const isDesktop = useMediaQuery('(min-width: 575px)')
return (
<Layout isNavbarTransparent={false}>
<section className={`section-base`}>
<div style={{ display: 'flex' }}>
{isDesktop ? (
<>
<div style={{ flexBasis: '350px' }}>
<DashboardSidebar embeddedIn={'dashboard'} />
</div>
<div>{children}</div>
</>
) : (
<div>{children}</div>
)}
</div>
</section>
</Layout>
)
}
I tried to set this for right content:
overflow: hidden;
height: 100px;
Did not help.
You can use position: sticky; to make it work. Attached a working example (no React but the concept is there). See this for further information.
Note: There may be various solution to this depending what you want to get, this answer was made with the context you provide. Hope it helps!
.top-bar {
width: 100%;
height: 40px;
background-color: black;
}
.dashboard {
display: flex;
width: 100%;
}
.menu {
width: 30%;
margin: 20px;
}
.sticky-container {
position: sticky;
top: 0; /* set top for sticky to work */
padding-top: 10px;
}
.content {
width: 70%;
}
<div>
<div class="top-bar"></div>
<div class="dashboard">
<div class="menu">
<div class="sticky-container">
<li>Options</li>
<li>Options</li>
<li>Options</li>
<li>Options</li>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
</div>
</div>
</div>
Solution:
overflow: scroll;
height: calc(100vh - 64px);
I am trying to figure out how to make a large div centered on all screens, but also be scrollable for smaller screens that otherwise couldn't see all of the div.
For example, let's say the div has the size of 1200px x 600px. Using the following will center the div, but not allow scrolling on smaller screen sizes:
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
My goal is to find a way to allow these smaller computer screens to see the entirety of the large div (via scrolling) but still have the div be centered on screens of all sizes.
Is this possible? In addition, is there a non-javascript solution?
I hope it will solve your problem.
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
height: auto;
padding: 20px;
background: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<div class="main-wrapper">
<div class="internal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perspiciatis. Assumenda cupiditate culpa obcaecati molestias architecto facilis! Ratione laboriosam reprehenderit asperiores et ipsum est, quisquam modi beatae odio enim nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet libero nam nulla assumenda optio iure adipisci, exercitationem deserunt a. Similique illum cumque eveniet quam enim in provident expedita culpa officia! Lorem ipsum dolor sit amet consectetur adipisicing, elit. Cupiditate ipsam et, nostrum. Dolorum autem qui voluptas doloribus voluptatibus est laboriosam perferendis blanditiis et quaerat iusto, vitae unde itaque dolore nulla.. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem recusandae, repellat velit rerum. Repellendus harum, sequi architecto deleniti tenetur cumque, ducimus itaque, nam officia vero minima quos, debitis quis sunt. Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Architecto, quaerat, illum. Aperiam, repellendus sit atque architecto cupiditate. Quis consequuntur, iure nihil doloremque, aut distinctio quibusdam rem, mollitia incidunt, voluptate quasi?
</div>
</div>
</body>
</html>
I know that direct children of a grid item cannot be floated. I'm trying to create an article layout where something like this is achieved: pull an image to either side, and have the text flow around it.
Here's what I have so far on Codepen. With named template columns, I can have an image fill up only part of the width of the grid, but is there any way to let the surrounding text flow around it?
Hopefully my Codepen example makes sense; please let me know if I can provide additional information or clarification!
figure {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
article {
max-width: 800px;
margin: auto;
display: grid;
grid-template-columns: [wide-start] minmax(1em, 1fr) [main-start] minmax(0, 16em) [main-half] minmax(0, 16em) [main-end] minmax(1em, 1fr) [wide-end];
}
article>* {
grid-column: main;
}
figure {
grid-column: wide-start / main-half;
}
div {
grid-column: main-half / main-end;
padding-left: 1em;
}
<article>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore dolorem porro vero! In iste nemo repellendus? Doloremque eius officia beatae doloribus autem vitae enim qui. Minus, facere? Quaerat, laboriosam enim?</p>
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>I wish the text could wrap around to my right</p>
</figcaption>
</figure>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, obcaecati, blanditiis ad nostrum autem atque error quasi, tempora debitis exercitationem illum. Maiores cum delectus, fugit repellat provident libero hic magni?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur aspernatur est numquam alias consequatur praesentium quaerat totam dicta non asperiores similique inventore, a perspiciatis perferendis laudantium minus ratione animi!</p>
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>Text is now in a column next to me (because I wrapped it in a <code><div></code>, but it won't wrap underneath me automatically</p>
</figcaption>
</figure>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat repellat consequatur, voluptas sint eum ea error sit hic dignissimos expedita totam suscipit officia consequuntur non, quaerat odio. Recusandae, consequatur maxime!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque eveniet, pariatur ipsa fuga hic nihil unde maiores, provident eius minima atque accusamus voluptate aspernatur perferendis. Ab rem inventore omnis at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At vitae ex fugit sequi, natus asperiores? Laudantium optio, doloribus error dolores exercitationem aliquid esse, reiciendis mollitia alias vel illo, amet officiis?</p>
</div>
</article>
If I understood you correctly and you don't have to use only CSS Gird for the whole layout you can wrap your figure and paragraphs in another div, then trough that div give your figure max width of 50%, float:left, and some margin-right... you get the point.
figure { margin: 0; }
img { max-width: 100%; height: auto; }
article {
max-width: 800px;
margin: auto;
display: grid;
grid-template-columns:
[wide-start] minmax(1em, 1fr)
[main-start] minmax(0, 16em)
[main-half] minmax(0, 16em) [main-end]
minmax(1em, 1fr) [wide-end];
}
article > * {
grid-column: main;
}
.floating{
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.floating figure {
float:left;
max-width: 50%;
margin-right: 20px;
}
.floating p {
margin-top:0;
}
<article>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore dolorem porro vero! In iste nemo repellendus? Doloremque eius officia beatae doloribus autem vitae enim qui. Minus, facere? Quaerat, laboriosam enim?</p>
<div class="floating">
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>I wish the text could wrap around to my right</p>
</figcaption>
</figure>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt, obcaecati, blanditiis ad nostrum autem atque error quasi, tempora debitis exercitationem illum. Maiores cum delectus, fugit repellat provident libero hic magni?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur aspernatur est numquam alias consequatur praesentium quaerat totam dicta non asperiores similique inventore, a perspiciatis perferendis laudantium minus ratione animi!</p>
</div>
<div class="floating">
<figure>
<img src="https://via.placeholder.com/500x300">
<figcaption>
<p>Text is now in a column next to me (because I wrapped it in a <code><div></code>, but it won't wrap underneath me automatically</p>
</figcaption>
</figure>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat repellat consequatur, voluptas sint eum ea error sit hic dignissimos expedita totam suscipit officia consequuntur non, quaerat odio. Recusandae, consequatur maxime!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque eveniet, pariatur ipsa fuga hic nihil unde maiores, provident eius minima atque accusamus voluptate aspernatur perferendis. Ab rem inventore omnis at!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At vitae ex fugit sequi, natus asperiores? Laudantium optio, doloribus error dolores exercitationem aliquid esse, reiciendis mollitia alias vel illo, amet officiis?</p>
</div>
</div>
</article>
I need a create 4 cards with non-changable height with buttons on the bottom, but there are different text amount in each card.
Position Fixed is connected to body element,
position absolute scrolls with content,
position sticky appears when content ends.
https://codepen.io/anatoli101/pen/NVzbGY Here is a basic exemple of my problem
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
background-color: red;
height: 400px;
width: 300px;
overflow-y: auto;
}
.button{
position:sticky;
bottom:0;
background-color: grey;
width: 100%;
height: 30px;
}
You'll get a much nicer result (no occluded scrollbars) using flex:
.content {
display: flex;
justify-content: space-evenly;
height: 400px;
}
.container {
display: flex;
flex-direction: column;
flex: 0 1 250px;
margin: 0 5px;
}
.fixed-div {
background-color: red;
overflow-y: auto;
flex: 1 1 auto;
}
.button {
background-color: grey;
flex: 0 0 30px;
}
<h1>I need grey area fixed on the bottom, not dependent on text amount</h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est </p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
</div>
A good way to achieve this is by wrapping the element with the class fixed-div inside a container, and moving the element with the class button outside of the element with the class fixed-div, so that it is the direct child of the container element. Then you can set position: relative to the container element, and position: absolute to the element with the class button. As the container element will have the exact same size (and especially the same height) as the element with the class fixed-div, the element with the class button will be positioned at its bottom.
You also will need to add a bottom padding to the element with the class fixed-div so that the button doesn't not hide its content, and so that it doesn't affect its defined height, you can set its box-sizing property to border-box.
See the following code:
.content {
display: flex;
width: 100%;
justify-content: space-around;
}
.container {
position: relative;
}
.fixed-div {
box-sizing: border-box;
width: 150px;
height: 400px;
padding-bottom: 30px;
overflow-y: auto;
background-color: red;
}
.button {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: grey;
}
<h1>I need grey area fixed on the bottom, non depending of text amount </h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum.</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae? </p>
</div>
<div class="button"></div>
</div>
</div>
I reduced the width of the text elements so that it works within a narrow container, you can run the code in full page if it is still too narrow.
Leaving the button inside the scrolling element and setting position: relative to the latter and position: absolute to the former wouldn't work as the bottom of the button would be positioned inside the scrolling element at 400px which is the height of the scrolling element, and would scroll with its content.
Hope that helps.
You can try code:
.fixed-div p{
display: block;
margin: 0;
padding: 10px;
height: 350px;
}
This is a demo: https://codepen.io/phuongnm153/pen/zQaobq
use position: relative; for the parent (fixed-div) and position:absolute;bottom:0; for the child (button)
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
position: relative;
background-color: green;
height: 400px;
width: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.button{
position:relative;
background-color: grey;
width: 100%;
height: 30px;
display: inline-table;
}
I have tried to run the attached codepen by creating a single html file that contains all the style etc.
It works fine on Chrome but does not show the "grid__description" as it is supposed to when the user clicks on the "grid_item".
Here is my source code and I have in-lined the css on this file.
Please can anyone help me understand how to get this to work on Safari?
Here is the link to the codepen:
https://codepen.io/javiervd/pen/MEajJx
All works great there!
* {
box-sizing: border-box;
}
.grid__item {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #aaa;
min-height: 150px;
font-size: 5em;
color: inherit;
text-decoration: none;
background: #ddd;
&:focus+.grid__description {
max-height: 200px;
transition: max-height 0.4s ease-in;
}
}
.grid__description {
max-height: 0;
overflow: hidden;
background: #aaa;
transition: max-height 0.15s ease-in;
div {
padding: 2em;
box-shadow: inset 0 0 2px #000;
}
}
#media screen and (min-width: 30em) {
.grid {
display: grid;
grid-template-areas: "item item item" "desc desc desc";
grid-template-columns: 1fr 1fr 1fr;
}
.grid__description {
grid-area: desc;
}
}
<div class="grid">
1
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores quos laudantium harum ea minus magnam hic ut tempore. Ipsam doloribus perferendis architecto magnam, exercitationem blanditiis corrupti totam ut praesentium</div>
</div>
2
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis dolores deserunt alias a earum, expedita ipsam ea tempora voluptatibus. Debitis modi tempore, totam doloribus sapiente qui quaerat eum fugit magni!</div>
</div>
3
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit magni similique esse, ipsum sapiente voluptate nihil nisi omnis nulla non consequatur veritatis voluptas sit cum sequi eaque, architecto, mollitia dolore.</div>
</div>
</div>
<div class="grid">
4
<div class="grid__description">
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, dolorem! Esse earum quis neque soluta, id fugiat magni consequatur placeat praesentium illum a sit ex dolore nisi ipsa similique deserunt!</div>
</div>
5
<div class="grid__description">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nulla voluptatibus eos quia sequi totam reprehenderit in cupiditate deserunt facere temporibus libero ut doloremque reiciendis ab commodi quibusdam consequatur corporis?</div>
</div>
6
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste laborum atque numquam distinctio illum deleniti architecto voluptas modi, repellat non! Itaque numquam architecto pariatur impedit, tempora ab eius sint incidunt.</div>
</div>
</div>
On Safari you need to add the tabindex attribute to the elements you want to focus. I added those to your html for example:
<div class="grid">
<a tabindex="0" href="#" class="grid__item">1</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores quos laudantium harum ea minus magnam hic ut tempore. Ipsam doloribus perferendis architecto magnam, exercitationem blanditiis corrupti totam ut praesentium</div>
</div>
<a tabindex="0" href="#" class="grid__item">2</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis dolores deserunt alias a earum, expedita ipsam ea tempora voluptatibus. Debitis modi tempore, totam doloribus sapiente qui quaerat eum fugit magni!</div>
</div>
<a tabindex="0" href="#" class="grid__item">3</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit magni similique esse, ipsum sapiente voluptate nihil nisi omnis nulla non consequatur veritatis voluptas sit cum sequi eaque, architecto, mollitia dolore.</div>
</div>
</div>
<div class="grid">
<a tabindex="0" href="#" class="grid__item">4</a>
<div class="grid__description">
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, dolorem! Esse earum quis neque soluta, id fugiat magni consequatur placeat praesentium illum a sit ex dolore nisi ipsa similique deserunt!</div>
</div>
<a tabindex="0" href="#" class="grid__item">5</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nulla voluptatibus eos quia sequi totam reprehenderit in cupiditate deserunt facere temporibus libero ut doloremque reiciendis ab commodi quibusdam consequatur corporis?</div>
</div>
<a tabindex="0" href="#" class="grid__item">6</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste laborum atque numquam distinctio illum deleniti architecto voluptas modi, repellat non! Itaque numquam architecto pariatur impedit, tempora ab eius sint incidunt.</div>
</div>
</div>