The row in the table is not reaching its maximum height

Question

The row in the table is not reaching its maximum height

Trying to design a layout with a topbar followed by a split layout has posed some challenges. The main issue I encountered was the need for the width and height to adjust automatically based on the browser size.

To address this, I attempted to use a table:

body {
  margin: 0;
  padding: 0;
  min-height: 500px;
  min-width: 600px;
}
table {
  border-collapse: collapse;
}
.topbar {
  height: 50px;
  position: relative;
  background: grey;
}
.layout_table {
  height: 100%;
  width: 100%;
}

<body>
  <table class="layout_table">
    <tr>
      <td class="topbar">
        hallo
      </td>
    </tr>
    <tr>
      <table width="100%">
        <td width="20%" style="background: blue;">

        </td>
        <td width="80%" style="background: yellow;">

        </td>
      </table>
    </tr>
  </table>
</body>

JSFiddle

The current outcome is mostly accurate. However, there is an issue with the second row of the initial table not occupying full height.

What steps can be taken to resolve this?

html css

Answer 1

Answer №1

If you're looking to move away from using <table> elements for layout purposes, it's worth noting that tables should only be used for tabular data. Instead, consider exploring modern alternatives like utilizing the calc(), float, or flex specifications to achieve your desired layout. While float is well-supported in older browsers, flex (part of the CSS3 Flexbox specification) offers a wider range of layout possibilities.

In the demonstration below, I've employed the flexbox specification to (1) vertically align the text within your topcontent section and (2) evenly distribute space between the blue and yellow columns underneath. Although achieving the latter may be simpler with float, avoiding it helps prevent issues with properly clearing floats.

body {
  margin: 0;
  padding: 0;
  min-height: 500px;
  min-width: 600px;
}
.topbar {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: grey;
}
.content {
  display: flex;
  height: calc(100vh - 50px);
  min-height: 450px; /* minimum parent height minus topbar height */
}
.content .c1 {
  width: 20%;
  height: 100%;
  background-color: blue;
}
.content .c2 {
  width: 80%;
  height: 100%;
  background-color: yellow;
}

<div class="topbar">
  <span>Hello</span>
</div>
<div class="content">
  <div class="c1"></div>
  <div class="c2"></div>
</div>

Answer 2

If you're looking to move away from using <table> elements for layout purposes, it's worth noting that tables should only be used for tabular data. Instead, consider exploring modern alternatives like utilizing the calc(), float, or flex specifications to achieve your desired layout. While float is well-supported in older browsers, flex (part of the CSS3 Flexbox specification) offers a wider range of layout possibilities.

In the demonstration below, I've employed the flexbox specification to (1) vertically align the text within your topcontent section and (2) evenly distribute space between the blue and yellow columns underneath. Although achieving the latter may be simpler with float, avoiding it helps prevent issues with properly clearing floats.

body {
  margin: 0;
  padding: 0;
  min-height: 500px;
  min-width: 600px;
}
.topbar {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: grey;
}
.content {
  display: flex;
  height: calc(100vh - 50px);
  min-height: 450px; /* minimum parent height minus topbar height */
}
.content .c1 {
  width: 20%;
  height: 100%;
  background-color: blue;
}
.content .c2 {
  width: 80%;
  height: 100%;
  background-color: yellow;
}

<div class="topbar">
  <span>Hello</span>
</div>
<div class="content">
  <div class="c1"></div>
  <div class="c2"></div>
</div>

The row in the table is not reaching its maximum height

Answer №1

Similar questions

The dimensions of text that wraps itself around multiple lines are distinct from those of text that remains on a single line

Ways to access a DOM element in Next.js when the class name is dynamically generated

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

Creating a designed pattern for a textbox: Let's get creative with your text

Attempting to alter the background image through the action of clicking on an image using jQuery, HTML, and CSS

Python code to locate images within HTML source code

I am experiencing an issue with the button that is supposed to link to a section within the same page while it is located within the jumbotron. Interestingly, the button

Switch from scrolling the entire page to scrolling within a single div

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

Is it possible to make a link_to, which is essentially a normal <a href>, clickable through a div that is also clickable?

The HTML code as content

Reveal the concealed button with a jQuery click event

What is the Best Way to Send JavaScript Variables to MYSQL Database with PHP?

What is the best way to create a responsive div containing multiple images?

What is the process for updating tabs and their content in React?

How to locate an element in Webdriver/Selenium when it lacks a class name, id, or css selector?

Unable to precisely reach the very bottom of the scrollbar

Using CSS and Bootstrap together in the Yii2 framework

Access a document from a collaborative directory directly in a web browser

What is the process for incorporating CSS, JavaScript, and images into a Django project?