All geek questions in one place

CSS flexbox border getting cut off at 100vh? How to make windows full screen?

I am using normalize css 3.0.3, my flexbox css is like this:

.container {
  display: flex; 
  border: 10px solid goldenrod;
  min-height: 100vh; /* height 100%*/
  flex-direction: row;
}

.box {
    color: white;
    font-size:100px;
    text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
    padding:10px;
}

.box1 { background:#1abc9c; }
.box2 { background:#3498db; }
.box3 { background:#9b59b6; }
.box4 { background:#34495e; }
.box5 { background:#f1c40f; }
.box6 { background:#e67e22; }
.box7 { background:#e74c3c; }
.box8 { background:#bdc3c7; }
.box9 { background:#2ecc71; }
.box10 { background:#16a085; }

My HTML:

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box box7">7</div>
    <div class="box box8">8</div>
    <div class="box box9">9</div>
    <div class="box box10">10</div>
</div>

I notice that the lower border of the border is cropped in google chrome, which is only visible when I “scroll down” a tiny bit. How to get the border to fit the window I'm looking at?

In addition, if I wanted to establish flex-direction: columnhow can I get it so that each “box” fills the entire screen?

+4
source share
3 answers

Simply install box-sizingon .containerto border-boxand use flex: 1of the flexible elements.

.container {
  box-sizing: border-box;
  display: flex; 
  border: 10px solid goldenrod;
  min-height: 100vh; /* height 100%*/
  flex-flow: row nowrap;
}

.container:nth-child(odd) {
  flex-flow: column nowrap;
}

.box {
  flex: 1;
  color: white;
  font-size:200%;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
  padding:10px;
}

.box1 { background:#1abc9c; }
.box2 { background:#3498db; }
.box3 { background:#9b59b6; }
.box4 { background:#34495e; }
.box5 { background:#f1c40f; }
.box6 { background:#e67e22; }
.box7 { background:#e74c3c; }
.box8 { background:#bdc3c7; }
.box9 { background:#2ecc71; }
.box10 { background:#16a085; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
</div>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
</div>
Run codeHide result
+1

, google , , " " . , , ?

body . 8 .

body { margin: 0; }.

/ . , box-sizing: border-box.

, body .container .

:

html {  box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit;}
body { margin: 0; }

DEMO 1

, flex-direction: column, , "" ?

:

.container { flex-direction: column; }
.box { flex-basis: 100vh; }

DEMO 2

( )

, CSS reset. body { margin: 0; }. , - .container. ( @DavidDomain .)

+1

, , , , ? Flexbox , box-sizing: border-box. 10px . .

DEMO 2 OP, Michael_B, . , . 5 10. :

  • .container .boxes 1000vh 1000% .
  • .container position: relative; .box position: absolute;
  • .box z-index 10 . № 1 - z-index: 10;, № 2 - z-index: 20; ..;

:

@charset "utf-8";
/* Core CSS */
html, body { box-sizing: border-box; font: 400 16px/1.45 'Source Code Pro';  width: 100vw; height: 100vh; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; outline: none; }
body { background: #121; color: #FEF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; }

DEMO 1

:

border: 10px... outline: 10px...

DEMO 2

:

justify-content: center; .container

flex: 1 0 auto; .box

:

flex-direction: row; flex-flow: row nowrap

DEMO 1

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>flexBox</title>
  <style>
    @charset "utf-8";
    /* Core CSS */
    html,
    body {
      box-sizing: border-box;
      font: 400 16px/1.45'Source Code Pro';
      width: 100vw;
      height: 100vh;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
    }
    body {
      background: #121;
      color: #FEF;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
    }
    .container {
      display: flex;
      outline: 10px solid goldenrod;
      min-height: 100vh;
      /* height 100%*/
      flex-direction: row;
    }
    .box {
      color: white;
      font-size: 100px;
      text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
      padding: 10px;
    }
    .box1 {
      background: #1abc9c;
    }
    .box2 {
      background: #3498db;
    }
    .box3 {
      background: #9b59b6;
    }
    .box4 {
      background: #34495e;
    }
    .box5 {
      background: #f1c40f;
    }
    .box6 {
      background: #e67e22;
    }
    .box7 {
      background: #e74c3c;
    }
    .box8 {
      background: #bdc3c7;
    }
    .box9 {
      background: #2ecc71;
    }
    .box10 {
      background: #16a085;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box box7">7</div>
    <div class="box box8">8</div>
    <div class="box box9">9</div>
    <div class="box box10">10</div>
  </div>
</body>

</html>
Hide result

DEMO 2

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>flexBox</title>
  <style>
    @charset "utf-8";
    /* Core CSS */
    html,
    body {
      box-sizing: border-box;
      font: 400 16px/1.45'Source Code Pro';
      width: 100vw;
      height: 100vh;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
    }
    body {
      background: #121;
      color: #FEF;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
    }
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;
      outline: 10px solid goldenrod;
      min-height: 1000vh;
      /* height 100%*/
      flex-flow: column nowrap;
      justify-content: center;
      align-content: baseline;
      align-items: space-around;
    }
    .box {
      color: white;
      font-size: 6em;
      text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
      padding: 1em;
      flex: 1 0 101vh;
      border: 10%;
      overflow: auto;
      height: 1000%;
    }
    .box1 {
      background: #1abc9c;
      z-index: 10;
    }
    .box2 {
      background: #3498db;
      z-index: 20;
    }
    .box3 {
      background: #9b59b6;
      z-index: 30;
    }
    .box4 {
      background: #34495e;
      z-index: 40;
    }
    .box5 {
      background: #f1c40f;
      z-index: 50;
    }
    .box6 {
      background: #e67e22;
      z-index: 60;
    }
    .box7 {
      background: #e74c3c;
      z-index: 70;
    }
    .box8 {
      background: #bdc3c7;
      z-index: 80;
    }
    .box9 {
      background: #2ecc71;
      z-index: 90;
    }
    .box10 {
      background: #16a085;
      z-index: 100;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box box7">7</div>
    <div class="box box8">8</div>
    <div class="box box9">9</div>
    <div class="box box10">10</div>
  </div>
</body>

</html>
Hide result
0

Source: https://habr.com/ru/post/1621827/

More articles:


All Articles