CODEWITHSUNDEEP
htmlcss
Manu Chadha
Manu Chadha

Reputation: 16723

unable to fit web page within a viewport

Please check the following example in codepen. I want the page to fit exactly in the viewport but the page is bigger than the viewport and the browser is showing scrollbars. How can I fit the page exactly in the viewport?

https://codepen.io/manuchadha/pen/PBKYBJ

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/"> 
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="./fiddle.css">

</head>
<body>

  <div class="css-grid-container"> <!-- 3 rows, 1 column--> 
    <div id="app-nav-component" class=" common-styles-div--white">NAV</div> <!-- 1st row of css-grid-containerr-->

<div id="homepage-top-div" class="body__div--background homepage-component-css-grid-container">  <!-- 2nd row of css-grid-containerr-->
  <p id="homepage-p"><span>Welcome </span> to my page. </p>
  <div id="create-component-top-div" class="css-grid-container__create-div common-styles-div--white"> <!-- 4 rows, 1 column-->
    <p class="css-grid-item__create-para1-div"> Para1 </p>
    <p class="css-grid-item__create-para2-div"> Para2 </p>
    <p class="css-grid-item__create-para3-div"> Para3 </p>
    <button id="get-question-list-button" class="btn content-div__button--blue css-grid-item__create-button-div btn-sm">Button</button>
  </div>
  <div id="practice-component-top-div" class="css-grid-container__practice-div common-styles-div--white"> <!-- 4 rows, 1 column-->
    <!-- this container item is also a container -->
      <!-- this is a container -->
      <p class="css-grid-item__practice-para1-div"> Para 4 </p>
      <p class="css-grid-item__practice-para2-div"> Para 5 </p>
      <p class="css-grid-item__practice-para3-div"> Para 6 </p>
      <!-- clicking the button will bring up a new component on the page - NewPracticeQuestionComponent. Check the app-routing.module-->
      <button id="new-question-button" class="btn content-div__button--blue css-grid-item__practice-button-div btn-sm">Button2</button>
      <!--button type="button" class="content-div__button--blue css-grid-item__practice-button-div"> Practice! </button-->
  </div>
</div>

    <div id="app-footer-component" class="common-styles-div--white">FOOTER</div> <!-- 3rd row of css-grid-containerr-->
    <!-- grid child -->
  </div>

</body>

CSS

.css-grid-container{
  height:100vh; /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

div#app-nav-component{ /*1st row, all columns*/
 grid-column:1/-1;
  grid-row:1/2;  
}



div#homepage-top-div{ /*2nd row, all columns*/
  grid-column:1/-1;
  grid-row:2/3;  
}

div#app-footer-component{ /*3rd row, all columns*/
 grid-column:1/-1;
  grid-row:3/4;   
}


.body__div--background {
  background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color:#555555;
  font-family: Helvetica;
  line-height:1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}

.homepage-component-css-grid-container{
  display: grid;
  grid-gap:20px;
  grid-template-rows: 50px 1fr; /*1st row size to fit<p>, remaining for practice-component and create-component both will be in same row but different columns*/
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
/*  height:100%; /*added `height:100%` rule as otherwise, the height of the grid was only up to the height of its children*/
}


div#app-content-component{
 grid-column:1/-1;
  grid-row:2/3; 
}





.css-grid-container__create-div{
  display:grid;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr;
  /*grid-template-rows: auto auto auto auto;*/
  /*height:300px; /* couldn't make it %*/
  /*width:250px;*/
}

.css-grid-item__create-para1-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.css-grid-item__create-para2-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

.css-grid-item__create-para3-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1  / -1;
  grid-row: 3 / 4;
}

.css-grid-item__create-button-div{
  align-self: center;
  justify-self:center;
  grid-column: 1 / -1;
  grid-row: 4 / 5;
}

p#homepage-p {
  /*font-style font-variant font-weight font-size/line-height font-family*/
  font: 300 1.5em 'Raleway', sans-serif;
  color: rgba(0,0,0,.5);
  grid-row: 1/2;
  grid-column: 1/-1;
}

.css-grid-container__practice-div{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  /*height:300px; /* could it be made % ?*/
  /*width:250px;
  line-height:2em;
  font-size: 1em;*/
}


.css-grid-item__practice-para1-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.css-grid-item__practice-para2-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

.css-grid-item__practice-para3-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}

.css-grid-item__practice-button-div{
  align-self: center;
  justify-self:center;
  grid-column: 1 / -1;
  grid-row: 4 / 5;
}

div#create-component-top-div{
  grid-row: 2/3;
  grid-column: 1 / 2;
  height:90%;
  width:70%;
  align-self: center;
  justify-self:center;

}

div#practice-component-top-div{
  grid-row: 2/3;
  grid-column: 2 / 3;
  height:90%;
  width:70%;
  align-self: center;
  justify-self:center;
}

Upvotes: 0

Views: 27

Answers (1)

jmcgriz
jmcgriz

Reputation: 3358

You're not using any sort of reset CSS, so your issue is the browser's default CSS. body has a default margin, so if you add body { margin: 0; } to your stylesheet, your scrollbar will disappear.

Upvotes: 1

Related Questions