Question 228356 in Html Question posted in
Some basic documentation can be found here.

how do i make the body fit in the window with HTML and/or CSS?

i’m pretty new to this.
i’ve tried changing the min-height: 100%;, max-height: 100%;, and height: 100%; on div and just directly on the body, yet it always extends past the bottom of the page, allowing me to scroll the entire page. i want the box i created to scroll on the inside. the only example i can think of what i want it to be like is msx.gay.

here’s my CSS:

    <style>
      body {
        background-color: blue;
        background-image: url("example.com");
        color: white;
        font-size: 15px;
      }
      .div-1 {
        background-image: url("example.com");
        min-height: 100%;
        width: 68%;
        border: 16px;
        border-color: purple;
        border-style: double;
        word-break: normal;
        overflow: scroll;
        font-family: monospace;
        position: relative;
        display: block;
      }
      a:link {
        color: #9999ff;
        text-decoration: none;
      }
      a:visited {
        color: #7777ff;
        text-decoration: none;
      }
      a:hover {
        color: #8888ff;
        text-decoration: underline overline;
      }
      a:active {
        color: #ff8888;
        text-decoration: underline overline;
      }
      hr.hr1 {
        border: 1px dotted dimgrey;
      }
      h4 {
        display: inline;
      }
    </style>

i apologise if i wrote this question poorly.

Tags:

2

Answers


  1. 0

    It seems like you’re trying to create a layout where a certain div element should scroll its content inside while the rest of the page remains fixed. Based on the CSS you’ve provided, I can offer some suggestions to achieve the desired behavior.

      body {
    margin: 0; /* Reset default margin */
    background-color: blue;
    color: white;
    font-size: 15px;
  }
  .container {
    display: flex;
    height: 100vh; /* Use viewport height to cover the full visible area */
  }
  .sidebar {
    background-color: purple;
    width: 32%;
    overflow-y: scroll;
    padding: 16px;
    font-family: monospace;
  }
  .content {
    background-image: url("example.com");
    flex: 1; /* Allow the content to grow and fill remaining space */
    padding: 16px;
  }
  a:link, a:visited {
    color: #9999ff;
    text-decoration: none;
  }
  a:hover, a:active {
    color: #8888ff;
    text-decoration: underline overline;
  }
  hr.hr1 {
    border: 1px dotted dimgrey;
  }
  h4 {
    display: inline;
  }
      <div class="container">
    <div class="sidebar">
      <!-- Sidebar content here -->
    </div>
    <div class="content">
      <!-- Main content here -->
    </div>
  </div>
    Login or Signup to reply.
  2. 0

    The vh measure is a unit of measurement that is relative to the height of the viewport. This means that the vh value will be multiplied by the height of the viewport to determine the actual length of the element.
    While min-height and max-height are dynamic and depends on the content of that element.

    If you want an element (div for ie.) to occupy the full height of your screen you can try :

    .div-1 {
  height: 100vh;
}

    There is also dvh (Dynamic viewport height) and svh (Small viewport height) that you can try.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search