CODEWITHSUNDEEP
htmlcss
KuramaUzumaki
KuramaUzumaki

Reputation: 23

Setting height of an element

I need to set height of an element to adjust to the height of display. I have tried several things however nothing seems to work

Please. see the css at the end, I have tried to adjust it per answer but still no help. I still have very tiny height. tried safarich, chrome

<div id='viewer'></div>
         <meta name="viewport" content="width=device-width, initial-scale=1">
        </div>

I have tried

height=device-height
height:100vh;
height 100%;

My css

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

html, body {
  height: 100%;
  margin: 0;
}
#viewer {
  height: 100%;        
  margin: 0 auto;     
  background: yellow; 
}

Upvotes: -1

Views: 73

Answers (2)

bron
bron

Reputation: 1548

Put this line

<meta name="viewport" content="width=device-width, initial-scale=1">

in your <head> section

Then, the first div in your <body> must be the 'viewer'. Use this css

html, body {
  height: 100%;
  margin: 0;
}
#viewer {
  height: 100%;        // or 100vh;
  margin: 0 auto;      // div will center if you give div a width
  background: yellow;  // test color
}
<body>
<div id="viewer">
<!-- other stuff of your page -->
</div>
</body>

Update. You did ask in the comment for more specific css, more like the css you did give in your question. This is difficult without knowing the html but as far things are common you can use the snippet below.

/* full height viewport */

html, body {
  height: 100%;
  margin: 0;
}
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
#viewer {
  position: relative;
  min-height: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 60px;
  background-color: #ffc;
}

/* nav-pills */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* common stuff */

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* footer */

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}
<div id="viewer">
<!-- all other stuff from your body section here -->
</div>

Upvotes: 3

Aniket K
Aniket K

Reputation: 434

You can add the following in your CSS file:

#viewer{
  height: 100vh;
  width: 100vw;
}

This will name the div with id="viewer" take full viewport height and width

Upvotes: -1

Related Questions