html - How do you make a div box fit all of it's contents, even if the content's height is larger than the viewport height? - TagMerge
3How do you make a div box fit all of it's contents, even if the content's height is larger than the viewport height?How do you make a div box fit all of it's contents, even if the content's height is larger than the viewport height?

How do you make a div box fit all of it's contents, even if the content's height is larger than the viewport height?

Asked 1 years ago
0
3 answers

Removing position: absolute; fixes this issue.

Source: link

0

<body>
  <div class="box"> 
    <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1"  alt="Example image"/> 
  </div>
</body>
.box {
  width: 30%;
  height: 200px;
  border: 5px dashed #f7a239;
}

img {
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 30%;
        height: 200px;
        border: 5px dashed #f7a239;
      }
      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="https://pp.userapi.com/c622225/v622225117/10f33/47AAEI48pJU.jpg?ava=1" alt="Example image"/>
    </div>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 60%;
        height: 300px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="https://images.unsplash.com/photo-1581974267369-3f2fe3b4545c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image" />
    </div>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        text-align: center;
      }
      img {
        width: 400px;
        height: 200px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <img src="https://images.unsplash.com/photo-1581974267369-3f2fe3b4545c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image">
  </body>
</html>

Source: link

0

I have a simple div element with a class name box.
<div class="box">
</div>
Then, clear any default margin or padding from the html and body tags.
html, body {
  margin:0px;
}
This is because when you set the height to 100% to an element it will try to stretch to its parent element height.
html, body {
  margin:0px;
  height:100%;
}

.box {
  background:red;
  height:100%;
}
I do not have to add one for horizontal as div is a block-level element that will take the full width horizontally by default.
.box {
  background:red;
  height:100vh;
}
You can also use position absolute as well as setting all the viewport sides (top, right, bottom, left) to 0px will make the div takes the full screen.
.box {
  background:red;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

Source: link

Questions related to 'How do you make a div box fit all of it's contents, even if the content's height is larger than the viewport height?'

How do you make a div box fit all of it's contents, even if the content's height is larger than the viewport height?
This item's height is 45dp. Consider making the height of this touch target 48dp or larger. Android
Make Iframe to fit 100% of container's remaining height
Content Div 100% Height Minus Dynamic Height Of Footer Div
React set an element with one className's min-height equal to the element with another className's min-height
How to make container div (of a given height) increase its height when the textarea inside it is resized?
How to make a Scrollable Alert's content in Jetpack Compose?
Keep absolute content's position inside scrollable div
How can I make a div stick to the top of the screen once it's been scrolled to?
Parent's Overflow:hidden doesn't show child's box-shadow
divide the spaces evenly IF items fit within the device's screen
Bottom div is not centered because above div's are taking more space. How to get bottom div centered?
Display DIV when hovering another DIV's child CSS
How can I make ui height max out at viewport electron
How to make an HTML div occupy the rest of the available height
SoftInputMode = "adjustResize" Does not scroll page content when content height is less than display height when virtual keyboard pops up
How do I make a placeholder for a 'select' box?
Making a div scroll with the page when hitting either edge of the viewport
In NativeScript, how can I make a label automatically resize to fit content?
How to make flutter card auto adjust its height depend on content

Recent Questions on html

    Programming Languages