I'm trying to make a navigation bar with pure HTML and CSS which doesn't require any JavaScript to open and close.
I'm having an issue with the navigation bar remaining open. When I set display: none or visibility: hidden to get desired functionality, the hyperlink doesn't function anymore.
http://codepen.io/anon/pen/dOMYEj
Is this possible? Thanks!
when you use display:flex ,position:absolute ,relative and fixed does not behave as expected.check this link
Modified markup and css a bit .please check the following snippet
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div {
height: 5vh;
width: 10vw;
position: fixed;
top: 0;
padding: 3px;
right: 0;
}
.icon {
display: inline;
}
nav > h1 {
font-family: cursive;
font-size: 1.2rem;
padding-left: 10px;
color: blue;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 10px;
cursor: pointer;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav > input {
display: none;
}
nav > label {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
#media (max-width: 5000px) {
/* changed to 5000 so it is always collapsed */
nav {
height: 6vh;
text-align: center;
justify-content: space-between;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
visibility: hidden;
}
section#top {
margin-top: 10vh;
}
input:checked + nav ul#links {
visibility: visible;
position: absolute;
right: 30px;
}
input:not:checked +nav ul#links {
visibility: hidden;
}
nav {
color: blue;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<input type='checkbox' id='one'>
<nav class="toggleable" tabindex="1">
<h1>Test Page</h1>
<div>
<label for="one">☰</label>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
Hope it helps
I was able to finally create it. I really hope this helps someone out.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="taco.css">
<title>Test Page</title>
</head>
<nav>
<header><h1>Test Site</h1></header>
<div id="navigation">
<button>☰</button>
<ul id="links">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Hours
</li>
<li>Directions
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<main>
<section id="top">
<h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae.
reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="about">
<h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="menu">
<h1>Menu</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam quo quia quod eius aliquam adipisci molestias vel, sapiente ex nobis, eligendi a inventore nihil sit aut molestiae voluptatibus culpa.
</section>
<section id="hours">
<h1>Hours</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste consequatur impedit, voluptatum saepe vero harum quod, repudiandae maxime dolorum non. Adipisci, tempore, quisquam! Est dolorem obcaecati distinctio explicabo veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta deserunt adipisci, debitis dolor ex consectetur iusto repellat molestias velit suscipit laudantium enim quae autem eveniet repudiandae sit. Facilis, quis, at.
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="directions">
<h1>Directions</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ipsam, optio reiciendis sit quidem beatae consequatur alias nulla labore! Vel quibusdam neque consequatur est tempora quas omnis placeat ab ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, sit amet dolores. Nobis corrupti nihil, officiis maiores eligendi modi quo, minus? Expedita, corrupti ullam nobis cum, quibusdam ipsa quo ex!
adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
<section id="contact">
<h1>Contact</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus ducimus fuga qui dignissimos reiciendis voluptatibus ea iusto dolorem doloribus eius similique impedit, molestiae consequuntur non ratione enim, ullam laboriosam. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
</section>
</main>
</html>
CSS:
* {
font-family: sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: white;
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div#navigation {
height: 5vh;
width: 10vw;
position: fixed;
top: 1vh;
padding: 1vw;
right: 25vw;
}
.icon {
display: inline;
}
nav header {
top: 1vw;
left: 1vw;
position: fixed;
}
nav header > h1 {
background-color: rgba(255, 255, 255, .5);
font-family: cursive;
font-size: 2rem;
padding-left: 1vw;
color: blue;
left: 0;
}
nav li {
list-style: none;
display: inline;
font-size: 1.2rem;
padding: 1vh;
cursor: pointer;
}
nav li:focus {
color: blue;
}
nav a {
color: darkgray;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a:active {
color: blue;
}
nav li:first-child * {
color: blue;
}
nav ul {
width: 50vw;
}
nav h1,
nav ul {
font-size: 2rem;
}
nav #links {
background-color: rgba(255, 255, 255, .9);
}
button {
display: none;
}
input {
display: none;
}
section {
font-size: 2rem;
padding: 1vh 5vh 0 5vh;
}
section#top {
margin-top: 5.5vh;
}
section > h1 {
margin-top: 8vh;
color: blue;
}
/* Changed to 9999px so it's always collapsed */
#media (max-width: 9999px) {
button {
font-size: 1.75rem;
border: 0;
background: white;
cursor: pointer;
display:block;
}
button:focus {
outline: 0;
}
nav div#navigation {
right: 0;
}
nav li {
display: block;
border: solid 1px blue;
margin: 0 auto;
}
#links {
display: none;
background-color: white;
}
button:focus + #links,
#links:hover {
display: block;
position: absolute;
right: 5vw;
}
nav {
color: blue;
}
section > h1 {
margin-top: 6.25vh;
color: blue;
}
nav header > h1 {
margin: 0;
padding: 0;
font-size: 2rem;
}
}
Demo
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 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>
What I’m trying to do is dynamically match the total heights of all three columns, which all have a dynamic amount of content possible. Each column can have a dynamic amount of content, giving them dynamic heights. Here's the layout I'm trying to achieve:
And here's some basic html/css: https://jsfiddle.net/fmpeyton/f1t2jhkt/
HTML:
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga, dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding-right: 30px;
float: left;
}
.box {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
background-color: #eee;
}
h4 { margin-top: 0; }
Without JS or flexbox, I'm not sure this is even possible with dynamic content. Any ideas?
Without flexbox or JS you are pretty much limited to wrapping the columns in a parent div and using CSS Tables.
.parent {
display: table;
table-layout: fixed;
}
.column {
display: table-cell;
width: 33.33%;
padding: 0 15px;
border: 1px solid grey;
}
JSFiddle
* {
box-sizing: border-box;
}
.parent {
display: table;
table-layout: fixed;
}
.column {
display: table-cell;
width: 33.33%;
padding: 0 15px;
background: pink;
border: 1px solid grey;
}
.box {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
background-color: #eee;
}
h4 {
margin-top: 0;
}
<div class="parent">
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
laboriosam!
</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates
dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga,
dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse
accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
laboriosam!
</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
</div>
</div>
</div>
How can I make white inner shadow in the div?
I've trying with other colors — works fine, but with white color that don't work.
JSBin example
Thanks!
Update:
I need something like this:
Alternatively, you can create a simple overlay on the layer above the content and make it your box-shadow
.container {
height: 300px;
width: 300px;
background: #fff;
border: 1px solid #cecece;
border-radius: 4px;
position: relative;
}
.container .content {
overflow: auto;
height: 100%;
}
.container:after {
width: calc(100% - 20px);
height: 110px;
background: linear-gradient(180deg, #fff, transparent);
position: absolute;
top: 0;
left: 0;
content: close-quote;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nesciunt quo fuga quasi vero modi aspernatur
nemo harum sapiente nobis ex aliquam excepturi possimus sit laboriosam libero adipisci non aliquid.Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero modi debitis ipsa architecto nihil
exercitationem cumque natus ducimus at quae doloribus illum optio aut expedita eveniet magnam officiis
qui!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reiciendis doloremque neque
debitis aperiam voluptates non libero atque ut iure rem consequuntur alias commodi velit asperiores sit
nesciunt minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolor ab animi ullam id
incidunt tempore atque doloremque quidem quaerat soluta eaque expedita aspernatur velit reprehenderit
doloribus similique. Quod non.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit delectus iste
aliquid vero ut? Odio quas asperiores odit velit vitae aspernatur beatae! Adipisci molestias placeat maiores
eos voluptatum assumenda sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci similique
quos fugit nostrum neque sit repudiandae error laborum possimus voluptatum molestiae impedit quo repellendus
minus corrupti doloribus itaque ipsa consequatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur molestias odit numquam soluta veniam saepe incidunt dolore praesentium nobis labore amet cumque
aliquam et consectetur est at quis voluptas doloremque?
</div>
</div>
</body>
</html>
box-shadow: grey 0px 30px 40px -2em inset;
Use grey into white.
If I understood well, you want a white shadow inside a white input? You need a different color to make the shadow.
I have maybe misunderstood, don't know. Tell me if this helped or if I just didn't understand.