I'm trying to build a (responsive) website using flexbox.
The text-boxes in the have to be fixed and are basically the navigation. The only moving part of the site is the text in the center that scrolls vertically and flows over the viewport height.
I essentially want to give the illusion that the text-boxes are floating in a fixed position above the content of the page.
This is obviously ugly.
But this is also ugly.
I want a scrollbar that doesn't stop at the text-boxes like on the picture above but don't now if that's even possible … How could I write that?
BTW: On the first img the flex-direction is simply set to row and on the second to column – as you may already have guessed.
This is what I want to achieve:
Here the code of the second img.
EDIT: I solved it by simply wrapping the text-boxes inside a fixed parent element. This post helped me and has a good example: How can I have a position: fixed; behaviour for a flexbox sized element?
body {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
margin: 0;
font-family: Avenir;
overflow: hidden;
}
a:visited {
color: black;
}
nav {
list-style-type: none;
}
.top a,
.bottom a {
margin: 1em;
}
.content {
display: flex;
flex-direction: column;
overflow: auto;
}
.intro-container {
margin: 5%;
}
.intro-text {
font-size: 54px;
line-height: 52px;
}
.FirstContent-container {
display: flex;
margin: 1em;
}
#media screen and (min-width: 68px) {
nav {
display: flex;
/* flex-direction: column; */
justify-content: space-between;
}
nav a {
margin: 0;
padding: 0;
text-decoration: none;
font-size: 1.5em;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="top">
text
text
</nav>
<div class="content">
<div class="intro-container">
<h1 class="intro-text"> header </h1>
</div>
<div class="FirstContent-container">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<nav class="bottom">
Text
Text
</nav>
</body>
</html>
As much as I love flexbox, not sure I would go with it for something like this, considering the navigation would need a fixed behavior and the content would be displayed in a centered box, here's how I'd do it:
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-family: Avenir;
text-decoration: none;
color: black;
}
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
.mainContent {
padding: 50px 20%;
}
.topLeft,
.topRight,
.bottomLeft,
.bottomRight {
position: absolute;
padding: 10px 25px;
background: lightgray;
font-size: 24px;
}
.topLeft {
top: 0;
left: 0;
}
.topRight {
top: 0;
right: 10px;
}
.bottomLeft {
bottom: 0;
left: 0;
}
.bottomRight {
bottom: 0;
right: 10px;
}
.intro-text {
margin: 5% 5% 5% 0;
font-size: 54px;
line-height: 104px;
}
/* mobile responsive */
#media (max-width: 768px) {
.topLeft,
.topRight,
.bottomLeft,
.bottomRight {
padding: 5px 25px;
background: lightgray;
font-size: 18px;
}
.mainContent {
padding: 50px 25%;
}
}
<nav>
Text
Text
Text
Text
</nav>
<div class="mainContent">
<h1 class="intro-text">header</h1>
<div class="FirstContent-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium consectetur, consequatur ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Tempora qui, porro culpa. Repudiandae aut dolorum, mollitia, minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea
rem laboriosam aliquid accusamus perspiciatis eius, debitis quod soluta. Ipsum dolores velit et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium consectetur, consequatur
ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora qui, porro culpa. Repudiandae aut dolorum, mollitia,
minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea rem laboriosam aliquid accusamus perspiciatis eius, debitis quod soluta. Ipsum dolores velit
et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium consectetur, consequatur ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum
doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora qui, porro culpa. Repudiandae aut dolorum, mollitia, minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea rem laboriosam aliquid accusamus perspiciatis eius, debitis quod soluta. Ipsum dolores velit et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Laudantium consectetur, consequatur ipsa nulla expedita eveniet optio modi, saepe dignissimos atque porro ut quos cupiditate harum doloremque at dolorem aliquid dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
qui, porro culpa. Repudiandae aut dolorum, mollitia, minus rem, illum, ea atque facere enim natus neque perspiciatis itaque earum dolor libero.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis ea rem laboriosam aliquid accusamus perspiciatis
eius, debitis quod soluta. Ipsum dolores velit et autem mollitia, consequuntur deleniti suscipit? Omnis, nemo!
</div>
</div>
You can try using position: fixed for the navigation.
Example:
body {
margin: 0;
font-family: Avenir;
overflow: hidden;
height: 100vh;
}
section {
height: 100%;
overflow: auto;
}
.content {
width: 66%;
margin: 0 auto;
}
nav {
position: fixed;
width: calc(100% - 10px);
display: flex;
justify-content: space-between;
}
nav.top {
top: 0;
}
nav.bottom {
bottom: 0;
}
nav a {
text-decoration: none;
font-size: 1.5rem;
padding: 1rem;
background: lightblue;
}
<section>
<nav class="top">
text
text
</nav>
<div class="content">
<h1 class="intro-text"> header </h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<nav class="bottom">
text
text
</nav>
</section>
Related
I have a problem with the TextOverflow CSS and Primefaces 12.
I would like the text to be truncated but remain formatted.
Unfortunately nothing happens.
value can also be "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.".
I expect that the text will still wrap - but will be truncated accordingly.
e.g.: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr..."
<p:panel styleClass="textoverflowParent">
<p:link escape="false"
styleClass="textoverflow"
value="#{item.description}"
target="_blank"
outcome="item.jsf">
<f:param name="name" value="#{item.name}"/>
</p:link>
</p:panel>
.textoverflowParent{
display: grid;
grid-template-columns: auto 1fr;
}
.textoverflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
}
This is what I have at the moment: https://codepen.io/nkloeffel/pen/WNKzqNR
The image is nested within several divs in this example:
<div class="left">
<div>
<div>
<div>
<div>
<img src="https://via.placeholder.com/500X400" />
</div>
</div>
</div>
</div>
</div>
The image should take 100% of the height, like it does, if it is the first child, see here: https://codepen.io/nkloeffel/pen/JjBLQKx
I can't set 100% height for every nested div, so what would be the easiest way to do this?
The easiest (but not necessarily the most robust ) would be to add the following css to make the child divs below .left expand to fill the parent. The image will then fill its parent
.wrapper {
width: 70vw;
margin: 20px auto;
background: #C5F5D4;
}
.wrapper>div {
padding: 20px;
}
.left {
width: 40%;
background: #E6CAFB;
flex-grow: 1;
}
.left>div {
flex: 1;
}
img {
object-fit: cover;
width: 100%;
height: auto;
min-height: 100%;
}
.right {
width: 60%;
padding: 20px;
background: #F3EDD6;
}
/*added this */
.left div {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="wrapper">
<div class="d-flex flex-row">
<div class="left">
<div>
<div>
<div>
<div>
<img src="https://via.placeholder.com/500X400" />
</div>
</div>
</div>
</div>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
Here's another option. I noticed you were trying to set flex: 1 on to the child of the .left div without declaring .left as display: flex. I've made all .left's children flex items which, with your existing flex: 1 rule, has the same effect.
.wrapper {
width: 70vw;
margin: 20px auto;
background: #c5f5d4;
}
.wrapper > div {
padding: 20px;
}
.left {
width: 40%;
background: #e6cafb;
flex-grow: 1;
display: flex; /* added this */
}
.left div {
display: flex; /* added this */
flex: 1;
}
img {
object-fit: cover;
width: 100%;
height: auto;
min-height: 100%;
}
.right {
width: 60%;
padding: 20px;
background: #f3edd6;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="wrapper">
<div class="d-flex flex-row">
<div class="left">
<div>
<div>
<div>
<div>
<img src="https://via.placeholder.com/500X400" />
</div>
</div>
</div>
</div>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
I would like to have a fixed element for the full width of a column, by using a CSS grid. The width of this fixed element should always adjust to the box around.
How is it possible to do that:
This is my try, unfortunately, it it protrudes beyond, because it takes the full screen width:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
main {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
section {
height: 100px;
width: 100%;
}
#one {
grid-column-start: 1;
grid-column-end: 2;
}
#two {
grid-column-start: 2;
grid-column-end: 6;
}
#three {
grid-column-start: 6;
grid-column-end: 7;
}
#shape {
top: 0;
position: fixed;
background-color: red;
height: 200px;
width: 100%;
opacity: 0.9;
}
<main>
<section id="one"><b>Left Area</b></section>
<section id="two"><b>Middle Area</b>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
<div id="shape">This Area should be fixed and have always the width of the Middle Area, even if there will be taken other grid column settings.</div>
</section>
<section id="three"><b>Right Area</b></section>
</main>
Would be very thankful for help <3
Make #shape a grid item (under the main element), put it at the same grid track as #two then consider position:sticky
body {
margin:0;
}
main {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
#one {
grid-column-start: 1;
grid-column-end: 2;
}
#two,
#shape{
grid-column-start: 2;
grid-column-end: 6;
grid-row:1
}
#three {
grid-column-start: 6;
grid-column-end: 7;
}
#shape {
top: 0;
position: sticky;
background-color: red;
height: 200px;
opacity: 0.9;
}
<main>
<section id="one"><b>Left Area</b></section>
<section id="two"><b>Middle Area</b>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.</p>
</section>
<div id="shape">This Area should be fixed and have always the width of the Middle Area, even if there will be taken other grid column settings.</div>
<section id="three"><b>Right Area</b></section>
</main>
I know that position:sticky makes the element sticky to its direct parent. But is it somehow still possible to make it sticky to its grandparent?
Here i have tried to create a jsfiddle:
https://jsfiddle.net/n3ozx2rL/6/
I want both my search-bar and the firstsection stick to the whole page (.content). And at the end after some scrolling i would like to have sth. like this:
At the moment, the firstsection keeps its stickiness since it is the direct child of content. But not the seasrch-bar, which stays sticky just within its direct parent "header".
Here is the code again since SO asks for it:
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100px;
background-color: orange;
margin-bottom: 10px;
}
.search-bar {
padding: 5px;
position: sticky;
top: 0;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 0;
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>
Try this. Didn't made sticky to grandparent, but got the expected design in that screenshot.
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100px;
background-color: orange;
margin-bottom: 10px;
position:sticky;
top:-70px;
}
.search-bar {
padding: 5px;
position: sticky;
top: 0px;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 30px;
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>
Here is another hack using negative margin and big height:
.content {
height: 1000px;
background-color: yellow;
padding: 20px;
}
.header {
height: 100%; /* as big as content */
background: linear-gradient(orange,orange) top/100% 100px no-repeat; /* color only 100px of height */
margin-bottom: 10px;
margin-bottom:-900px; /* negative margin here */
}
.search-bar {
padding: 5px;
position: sticky;
top: 0;
background:orange;
}
.firstsection {
height: 50px;
background-color: green;
margin-bottom: 10px;
position: sticky;
top: 30px; /* adjust this */
}
.secondsection {
height: 300px;
background-color: blue;
}
<div class="content">
<header class="header">
<div class="search-bar">
<input>
<input>
</div>
</header>
<section class="firstsection">
<textarea></textarea>
</section>
<section class="secondsection">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</section>
</div>
The left and the right side has much text but can not be scrolled independendly from each other because I have to scroll the whole browser window.
How can I scroll text longer than the vertical screen in the left and right div without having a browser window scrollbar?
http://jsfiddle.net/uFDK5/5/
CSS:
body {
background-color:Yellow;
margin: 0;
padding: 0;
height:100%;
width:100%;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
#DataGridButtonBar
{
background-color:Fuchsia;
}
#TreeButtonBar
{
width:200px;
float:left;
background-color:Maroon;
}
#TreeWrapper{
background-color:Aqua;
width:200px;
float:left;
}
#DataGridWrapper{
background-color:Silver;
}
.clear
{
clear:both;
}
input button
{
display:inline;
}
HTML:
<div id="TreeButtonBar">
<input type="button" value="Add Node" />
<input type="button" value="Delete Node" />
</div>
<div id="DataGridButtonBar">
<input type="button" value="Add row" />
<input type="button" value="Delete row" />
</div>
<div class="clear"></div>
<div id="TreeWrapper">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="DataGridWrapper">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="clear"></div>
Try:
#TreeWrapper{
background-color: aqua;
width: 200px;
float: left;
position: fixed;
left: 0px;
top: 20px;
bottom: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#DataGridWrapper{
background-color: silver;
position: fixed;
left: 200px;
top: 20px;
bottom: 0px;
overflow-y: auto;
overflow-x: hidden;
}
This works, however you might want to fiddle width the height and widths...
body {
background-color:Yellow;
margin: 0;
padding: 0;
height:100%;
width:100%;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
#DataGridButtonBar
{
background-color:Fuchsia;
}
#TreeButtonBar
{
width:200px;
float:left;
background-color:Maroon;
}
#TreeWrapper{
background-color:Aqua;
width:200px;
height:400px;
float:left;
overflow:scroll;
}
#DataGridWrapper{
background-color:Silver;
width:300px;
height:400px;
float:left;
overflow:scroll;
}
.clear
{
clear:both;
}
input button
{
display:inline;
}
Use the overflow property in css.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
You use the overflow: scroll; CSS property on both you div-elements to accomplish that. So in you case it would be:
#TreeWrapper, #DataGridWrapper {
overflow: scroll;
}