stretch the height of content to the entire page

Asked Apr 16 '20 at 08:56

Active Apr 16 '20 at 09:04

Viewed 29 times

How to stretch the height of the content on the rest of the page and leave padding 10 pixels below. The page should not have scrolling. vh and calc is well supported by browsers, but I can’t understand how to calc remaining content height correctly

html, body {
padding: 0;
margin: 0;
}
.wrap {
  padding: 10px;
}

.content {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 15px;
  height: calc(100vh - 82px);
}

<div class="wrap">
  <input type="search" placeholder="search">
  <div class="content"></div>
</div>

edited Apr 16 '20 at 09:04

asked Apr 16 '20 at 08:56

stiv

the body has a default margin that you need to remove – Temani Afif Apr 16 '20 at 09:00
in the examples that you sent there is a scroll page. I need an example page without scrolling. I updated my code, maybe it is correct – stiv Apr 16 '20 at 09:08

stretch the height of content to the entire page

0 Answers0