Home > OS >  Content fit to window
Content fit to window

Time：10-04

can you help me with that, the object after I added navbar isn´t fit to window.I think that is becouse I added navbar, and css is wrong. I tried editing code like html and css, but it isn´t working.I want to navbar be ahead and body was at full page and animation on background working. Thank´s for answer!

    <nav class="navbar">
  <span class="navbar-toggle" id="js-navbar-toggle">
            <i class="fa fa-bars"></i>
</span>
  <a href=/index.html><img src="https://i.ibb.co/VtLx8my/f19ada7376b147df815f4dc7438317e0-5.png" alt="Webstránka MENU" class=logo width="210" height="100">
    <ul class="main-nav" id="js-menu"></a>
    <li>
      <a href="#" class="nav-links active">Home</a>
    </li>
    <li>
      <a href="#" class="nav-links">News</a>
    </li>
    <li>
      <a href="#" class="nav-links">About</a>
    </li>
    <li>
      <a href="#" class="nav-links">Contact</a>
    </li>
    <li>
      <a href="#" class="nav-links">Archived</a>
    </li>
  </ul>
</nav>
<div class="container">
  <section class="main">
    
<div class="context">
        <h1>Web MENU</h1>
      <h3>Welcome!</h3>
    </div>


<div class="area" >
            <ul class="circles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
            </ul>
    </div > 
<style>
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
    
    *{
        margin: 0px;
        padding: 0px;
    }
    
    body{
        font-family: 'Exo', sans-serif;
    }
    
    
    .context {
        width: 100%;
        position: absolute;
        top:50vh;
        
    }
    
    .context h1{
        text-align: center;
        color: #fff;
        font-size: 50px;
    }
    
    .context p{
        text-align: center;
        color: #fff;
        font-size: px;
    }
    
    .context h3{
        text-align: center;
        color: #fff;
        font-size: 40px;
    }
    
    
    .area{
        background: #4e54c8;  
        background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
        width: 100%;
        height:100vh;
        
       
    }
    
    .circles{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .circles li{
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: animate 25s linear infinite;
        bottom: -150px;
        
    }
    
    .circles li:nth-child(1){
        left: 25%;
        width: 80px;
        height: 80px;
        animation-delay: 0s;
    }
    
    
    .circles li:nth-child(2){
        left: 10%;
        width: 20px;
        height: 20px;
        animation-delay: 2s;
        animation-duration: 12s;
    }
    
    .circles li:nth-child(3){
        left: 70%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
    }
    
    .circles li:nth-child(4){
        left: 40%;
        width: 60px;
        height: 60px;
        animation-delay: 0s;
        animation-duration: 18s;
    }
    
    .circles li:nth-child(5){
        left: 65%;
        width: 20px;
        height: 20px;
        animation-delay: 0s;
    }
    
    .circles li:nth-child(6){
        left: 75%;
        width: 110px;
        height: 110px;
        animation-delay: 3s;
    }
    
    .circles li:nth-child(7){
        left: 35%;
        width: 150px;
        height: 150px;
        animation-delay: 7s;
    }
    
    .circles li:nth-child(8){
        left: 50%;
        width: 25px;
        height: 25px;
        animation-delay: 15s;
        animation-duration: 45s;
    }
    
    .circles li:nth-child(9){
        left: 20%;
        width: 15px;
        height: 15px;
        animation-delay: 2s;
        animation-duration: 35s;
    }
    
    .circles li:nth-child(10){
        left: 85%;
        width: 150px;
        height: 150px;
        animation-delay: 0s;
        animation-duration: 11s;
    }
    
    
    
    @keyframes animate {
    
        0%{
            transform: translateY(0) rotate(0deg);
            opacity: 1;
            border-radius: 0;
        }
    
        100%{
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
            border-radius: 50%;
           }
       
    }
       
    
         /*General CSS*/
    :root {
      --blue: #007bff;
      --indigo: #6610f2;
      --purple: #6f42c1;
      --pink: #e83e8c;
      --red: #dc3545;
      --orange: #fd7e14;
      --yellow: #ffc107;
      --green: #28a745;
      --teal: #20c997;
      --cyan: #17a2b8;
      --white: #fff;
      --gray: #6c757d;
      --gray-dark: #343a40;
      --primary: #007bff;
      --secondary: #6c757d;
      --success: #28a745;
      --info: #17a2b8;
      --warning: #ffc107;
      --danger: #dc3545;
      --light: #f8f9fa;
      --dark: #343a40;
      --breakpoint-xs: 0;
      --breakpoint-sm: 576px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 992px;
      --breakpoint-xl: 1200px;
      --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    }
    *,
    *:before,
    *:after {
      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      box-sizing: border-box !important;
      padding: 0;
      margin: 0;
    }
    body {
      width: 100%;
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 450;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      margin: 0px auto;
    }
    html {
      position: relative;
      min-height: 100%;
      width: 100%;
      overflow-x: hidden;
    }
    .navbar {
      font-size: 18px;
      background-image: linear-gradient(260deg, blue 0%, lightblue 100%);
      border: 1px solid rgba(0, 0, 0, 0.2);
      position: fixed;
      top:0;
      left:0;
      right:0;
      z-index:1000;
      margin: 0px auto;
    }
    
    .main-nav {
      list-style-type: none;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .main-nav li{
      
    }
    .nav-links{
      padding: 14px 16px;
      display:block;
    }
    .nav-links,
    .logo {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.7);
    }
    .nav-links:hover,
    .nav-links:focus
    .nav-links .active,
    .logo:hover,
    .logo:focus{
      background: darkblue;
    }
    
    .main-nav li {
      text-align: left;
      justify-self:flex-end;
      align-self: flex-end;
    }
    
    .logo {
      padding: 15px 16px 14px;
    }
    .navbar-toggle {
      align-self:flex-end !important;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.8);
      font-size: 24px;
      margin-right: 5%;
      float: right;
      padding: 1.5px 16px;
    }
    .main-nav {
      list-style-type: none;
      display: none;
    }
    .active {
      display: block;
    }
    @media screen and (min-width: 768px) {
      .navbar .main-nav{
        display: flex;
        padding-bottom: 0;
        flex-direction: row;
        justify-content: flex-end;
      }
      .main-nav li{
        justify-self:flex-end;
        align-self: flex-end;
      }
    
      .nav-links {
        display: inline-block;
      }
    
      .logo {
        float: left;
        padding: 15px 16px;
      }
    
      .navbar-toggle {
        display: none;
      }
    
      .logo:hover,
      .nav-links:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
    .container:nth-of-type(1) {
      padding-top: 60px !important;
    }
    .container {
      min-width: 100%;
      display: block;
      padding: 1%;
      margin: 0px auto 20px;
      position: relative;
    }
    .table {
      table-layout: auto;
      padding: 0.5%;
      border-collapse: collapse;
      min-width: 100%;
    }
    .table td,
    .table th {
      border: solid #ededed;
      padding: 0.5% 1%;
    }
    th {
      text-align: center;
    }
    tbody tr:nth-of-type(2n   1) {
      background: #eeeeee;
    }
    .main h1{
      background: url('http://www.gregswebdesignkc.com/AICGP/assets/images/bldg1.jpg') no-repeat fixed center/100%;
      text-align: center;
      padding: 4%;
      color: #fff;
      margin: 0px -1%;
    }
    
    .section-1 h1{
      background: url('http://www.gregswebdesignkc.com/AICGP/assets/images/bldg1.jpg') no-repeat fixed center/100%;
      text-align: center;
      padding: 4%;
      color: #fff;
      margin: 0px -1%;
    }
    .panel{
      margin-bottom: 1.5%
    }
    .panel p{
      padding:2% 1%;
      text-align:center;
      background-color: #eeeeee;
      margin-top: 1%;
      border-radius: 14px;
      border: #777 solid 4px;
    }
    
    .lead{
      font-size: x-large
    }
    
    section{
      margin-top:.5%;
      margin-bottom: .5%;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        margin: 10px 0 10px;
        text-transform: uppercase;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 800;
        letter-spacing: 1px;
      text-align: center;
    }
    
    section{
        padding-bottom:5%;
    }
    
    .row{
        position:relative;
    }
    
    .row:first-child{
        position: relative;
        margin-top:80px !important;
    }
    hr{
      margin: 2% 35%;
      color:#ededed;
    }
    .section-split{
      width: 100%;
      float: left;
      margin-top: 2%;
      margin-bottom: 2%;
      font-size: 17.5px;
      page-break-inside: avoid;
      border: 3px solid #fff;
      -webkit-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
      -mox-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
      -ms-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
      box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
      padding: 1% 2%;
      border-left: none;
      margin-left: 1%;
      margin-right: 1%;
    }
    
    
    /* BS4 CSS that seems not to work */
    
    .float-xs-left {
        float: left!important
    }
    
    .float-xs-right {
        float: right!important
    }
    
    .float-xs-none {
        float: none!important
    }
    
    @media (min-width:576px) {
        .float-sm-left {
            float: left!important
        }
        .float-sm-right {
            float: right!important
        }
        .float-sm-none {
            float: none!important
        }
    }
    
    @media (min-width:768px) {
        .section-split{
          width: 45% !important;
        }
        .float-md-left {
            float: left!important
        }
        .float-md-right {
            float: right!important
        }
        .float-md-none {
            float: none!important
        }
    }
    
    @media (min-width:992px) {
        .float-lg-left {
            float: left!important
        }
        .float-lg-right {
            float: right!important
        }
        .float-lg-none {
            float: none!important
        }
    }
    
    @media (min-width:1200px) {
        .float-xl-left {
            float: left!important
        }
        .float-xl-right {
            float: right!important
        }
        .float-xl-none {
            float: none!important
        }
    }
    
    @-ms-viewport {
      width: device-width;
    }<style>

CodePudding user response：

Try to change padding in container class:

.container {
  min-width: 100%;
  display: block;
  padding: 0; <--HERE
  margin: 0px auto 20px;
  position: relative;
}

Show code snippet

CodePudding user response：

The blueish background does not extend the full length of the content because the ul.circles has position absolute and therefore does not affect the total height of its parents which have the background color.

If you add the linear-gradient to the unordered list then it will extend the color to full height.

@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: 'Exo', sans-serif;
}

.context {
  width: 100%;
  position: absolute;
  top: 50vh;
  z-index: 999;
  /* ADDED */
}

.context h1 {
  text-align: center;
  color: #fff;
  font-size: 50px;
}

.context p {
  text-align: center;
  color: #fff;
  font-size: px;
}

.context h3 {
  text-align: center;
  color: #fff;
  font-size: 40px;
}

.area {
  background: #4e54c8;
  background: linear-gradient(to left, #8f94fb, #4e54c8);
  width: 100%;
  height: 100vh;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to left, #8f94fb, #4e54c8);
  /* ADDED */
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}


/*General CSS*/

 :root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  margin: 0px auto;
}

html {
  position: relative;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.navbar {
  font-size: 18px;
  background-image: linear-gradient(260deg, blue 0%, lightblue 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0px auto;
}

.main-nav {
  list-style-type: none;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.main-nav li {}

.nav-links {
  padding: 14px 16px;
  display: block;
}

.nav-links,
.logo {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}

.nav-links:hover,
.nav-links:focus .nav-links .active,
.logo:hover,
.logo:focus {
  background: darkblue;
}

.main-nav li {
  text-align: left;
  justify-self: flex-end;
  align-self: flex-end;
}

.logo {
  padding: 15px 16px 14px;
}

.navbar-toggle {
  align-self: flex-end !important;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
  margin-right: 5%;
  float: right;
  padding: 1.5px 16px;
}

.main-nav {
  list-style-type: none;
  display: none;
}

.active {
  display: block;
}

@media screen and (min-width: 768px) {
  .navbar .main-nav {
    display: flex;
    padding-bottom: 0;
    flex-direction: row;
    justify-content: flex-end;
  }
  .main-nav li {
    justify-self: flex-end;
    align-self: flex-end;
  }
  .nav-links {
    display: inline-block;
  }
  .logo {
    float: left;
    padding: 15px 16px;
  }
  .navbar-toggle {
    display: none;
  }
  .logo:hover,
  .nav-links:hover {
    color: rgba(255, 255, 255, 1);
  }
}

.container:nth-of-type(1) {
  padding-top: 60px !important;
}

.container {
  min-width: 100%;
  display: block;
  padding: 1%;
  margin: 0px auto 20px;
  position: relative;
}

.table {
  table-layout: auto;
  padding: 0.5%;
  border-collapse: collapse;
  min-width: 100%;
}

.table td,
.table th {
  border: solid #ededed;
  padding: 0.5% 1%;
}

th {
  text-align: center;
}

tbody tr:nth-of-type(2n 1) {
  background: #eeeeee;
}

.main h1 {
  background: url('http://www.gregswebdesignkc.com/AICGP/assets/images/bldg1.jpg') no-repeat fixed center/100%;
  text-align: center;
  padding: 4%;
  color: #fff;
  margin: 0px -1%;
}

.section-1 h1 {
  background: url('http://www.gregswebdesignkc.com/AICGP/assets/images/bldg1.jpg') no-repeat fixed center/100%;
  text-align: center;
  padding: 4%;
  color: #fff;
  margin: 0px -1%;
}

.panel {
  margin-bottom: 1.5%
}

.panel p {
  padding: 2% 1%;
  text-align: center;
  background-color: #eeeeee;
  margin-top: 1%;
  border-radius: 14px;
  border: #777 solid 4px;
}

.lead {
  font-size: x-large
}

section {
  margin-top: .5%;
  margin-bottom: .5%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0 10px;
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
}

section {
  padding-bottom: 5%;
}

.row {
  position: relative;
}

.row:first-child {
  position: relative;
  margin-top: 80px !important;
}

hr {
  margin: 2% 35%;
  color: #ededed;
}

.section-split {
  width: 100%;
  float: left;
  margin-top: 2%;
  margin-bottom: 2%;
  font-size: 17.5px;
  page-break-inside: avoid;
  border: 3px solid #fff;
  -webkit-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
  -mox-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
  -ms-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
  box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
  padding: 1% 2%;
  border-left: none;
  margin-left: 1%;
  margin-right: 1%;
}


/* BS4 CSS that seems not to work */

.float-xs-left {
  float: left!important
}

.float-xs-right {
  float: right!important
}

.float-xs-none {
  float: none!important
}

@media (min-width:576px) {
  .float-sm-left {
    float: left!important
  }
  .float-sm-right {
    float: right!important
  }
  .float-sm-none {
    float: none!important
  }
}

@media (min-width:768px) {
  .section-split {
    width: 45% !important;
  }
  .float-md-left {
    float: left!important
  }
  .float-md-right {
    float: right!important
  }
  .float-md-none {
    float: none!important
  }
}

@media (min-width:992px) {
  .float-lg-left {
    float: left!important
  }
  .float-lg-right {
    float: right!important
  }
  .float-lg-none {
    float: none!important
  }
}

@media (min-width:1200px) {
  .float-xl-left {
    float: left!important
  }
  .float-xl-right {
    float: right!important
  }
  .float-xl-none {
    float: none!important
  }
}
<nav class="navbar">
  <span class="navbar-toggle" id="js-navbar-toggle">
            <i class="fa fa-bars"></i>
</span>
  <a href=/index.html><img src="https://i.ibb.co/VtLx8my/f19ada7376b147df815f4dc7438317e0-5.png" alt="Webstránka MENU" class=logo width="210" height="100">
    <ul class="main-nav" id="js-menu">
  </a>
  <li>
    <a href="#" class="nav-links active">Home</a>
  </li>
  <li>
    <a href="#" class="nav-links">News</a>
  </li>
  <li>
    <a href="#" class="nav-links">About</a>
  </li>
  <li>
    <a href="#" class="nav-links">Contact</a>
  </li>
  <li>
    <a href="#" class="nav-links">Archived</a>
  </li>
  </ul>
</nav>
<div class="container">
  <section class="main">

    <div class="context">
      <h1>Web MENU</h1>
      <h3>Welcome!</h3>
    </div>


    <div class="area">
      <ul class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

The content also needs to be brought forward to show above this new background setting.

Page link：https//www.codepudding.com/os/138121.html

Prev:Bootstrap 5 navigation not wide as parent container
Next:Hide submenu when different submenu is opened
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding