How to fit elements perfectly within another element?

user_13344197 0
Viewed 68

Using the 98.css library: https://jdan.github.io/98.css/

I'm currently trying to fit the bottom element status-bar at the bottom of the box with its width set to stretch to the entire box's width. I feel like I'm doing it incorrectly and/or not doing it properly via percentages in .width-stretch.

The result is this: enter image description here

Note that it is somehow overlapping the bottom-right edge of the box. When I try making the width: 99%, it gets pretty close to what I want but not quite, and it is left-aligned (and not centered). I'm trying to figure out a more elegant solution that fixes this issue; any suggestions? I'm also open to any CSS frameworks that can run alongside 98.css to make styling easier. Thanks!

...
        <style>
            html, body {
                margin:0px;
                background: #c0c0c0;
            }
            .center {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top:0px;
                right:0px;
                bottom:0px;
                left:0px;
            }
            .relative-position {
                position: relative;
                width: auto;
            }
            .bottom {
                position: absolute;
                bottom: 0;
                padding-bottom: 4px;
            }
            .width-stretch {
                width: 100%;
            }
        </style>
        
    </head>
    <body>
        <!-- MAIN -->
        <div class="center">
            <div class="window relative-position" style="width: 95%; height: 95vh;">
                <div class="title-bar">
                    <div class="title-bar-text">A Window With A Status Bar</div>
                </div>
                <div class="window-body">
                    <p> There are just so many possibilities:</p>
                    <ul>
                        <li>A Task Manager</li>
                        <li>A Notepad</li>
                        <li>Or even a File Explorer!</li>
                    </ul>
                </div>
                <div class="status-bar bottom width-stretch">
                    <p class="status-bar-field">Press F1 for help</p>
                    <p class="status-bar-field">Slide 1</p>
                    <p class="status-bar-field">CPU Usage: 14%</p>
                </div>
            </div>
        </div>
    </body>
</html>
css html
2 Answers

You can use flex-direction:column on .window, with flex:1 on the .window-body so that it fills all the available vertical space.

html,
body {
  margin: 0px;
  background: #c0c0c0;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.window {
  display: flex;
  flex-direction: column;
}

.window-body {
  flex: 1;
}
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="center">
  <div class="window " style="width: 95%; height: 95vh;">
    <div class="title-bar">
      <div class="title-bar-text">A Window With A Status Bar</div>
    </div>
    <div class="window-body">
      <p> There are just so many possibilities:</p>
      <ul>
        <li>A Task Manager</li>
        <li>A Notepad</li>
        <li>Or even a File Explorer!</li>
      </ul>
    </div>
    <div class="status-bar">
      <p class="status-bar-field">Press F1 for help</p>
      <p class="status-bar-field">Slide 1</p>
      <p class="status-bar-field">CPU Usage: 14%</p>
    </div>
  </div>
</div>

user_53853810

Add these styles to the inside of the style tag.

.status-bar {
  display: flex;
}

.status-bar-field {
  flex: 1;
  padding: 0 10px;
  border: 1px solid black;
}
user_142060190
Related