CODEWITHSUNDEEP
htmlcss
ak-SE
ak-SE

Reputation: 1000

CSS border in div does not fit to height of the content

I have created a CSS DIV with BORDER property to fit 100% height of the window and content. It works fine when the content is less than the window height. But, If the content is more than the window height, border still fits to window height only.

The code I used is given bellow:

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.form {
  position: relative;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 520px;
  height: 100%;
  margin: 0 auto;
  vertical-align: middle;
  border: 1px solid blue !important;
  box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
  border-radius: 5px;
  font-family: "Times New Roman", Georgia, Serif;
}
<div class="form"></div>

Border corner snapshot is given below

CSS Div Border

Upvotes: 1

Views: 2353

Answers (1)

Synoon
Synoon

Reputation: 2351

It does work with min-height. Your problem was that you set a height onto body tag which was limiting the size of your form only the content was overflowing your box.

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.form {
  position: relative;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 520px;
  min-height: 100%;
  margin: 0 auto;
  vertical-align: middle;
  border: 1px solid blue !important;
  box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
  border-radius: 5px;
  font-family: "Times New Roman", Georgia, Serif;
}
<div class="form">
lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem ipsoum<br>lorem 
</div>

Upvotes: 1

Related Questions