vielfrass vielfrass - 3 months ago 10
CSS Question

Need left side-div to vertically fill alongside text (without using fixed)

Keeping it short, I want the grey div called #left to expand with the content #content. I don't want to use position:fixed because it looks nasty zooming in on mobile devices. I have searched for hours on this and I cannot believe I am finding it so difficult to solve this.

Thank you.

JSFiddle problem

body {
height: 100%;
}
#wrapper {
height: 100%;
}
#left {
background-color: #ecf0f1;
background-image: none;
height: 100%;
position: absolute;
top: 0;
width: 35%;
}
#content {
margin-left: 38%;
font-size: 4vw;
max-width: 50%;
height: 100%;
position: absolute;
}

Answer

Flexbox can do that.

body,
html {
  min-height: 100%;
}
#wrapper {
  height: 100%;
  display: flex;
}
#left {
  background-color: #ccc;
  width: 35%;
}
#content {
  font-size: 4vw;
  max-width: 50%;
}
<div id="wrapper">
  <div id="left"></div>
  <div id="content">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</div>
</div>

By the way, absolute positioning is a very poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out LearnLayout.com

Comments