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?

htmlcss

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubles with NextJS and TailwindCSS Styling

I encountered a strange issue when I used the component separately. Here's how the code looked like: <> <Head> <title>Staycation | Home</title> <meta name="viewport" content="initial- ...

javascriptcssreactjsnext.jstailwind-css

Other options besides re-flowing and repainting

After doing some research on various platforms like Stack Overflow, I've come across information stating that re-paints and re-flows can be quite taxing on a browser's resources. I am interested in learning about alternative CSS/JS techniques to ...

javascripthtmlcssrepaintreflow

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the f ...

cssreactjstypescriptmaterial-ui

Php Error 404 occurs upon attempting to redirect from the main landing page

I have been encountering an issue while trying to add links to different pages of my website. Whenever I click on the link, it displays a "404 Page Not Found" error message. Objective: My main goal is to create links from my home page, index.php, to other ...

phpindexinghyperlinkhtml

Editing the content of a div in real-time by dynamically updating the innerHTML

Looking for a way to dynamically change the innerHTML of a contentEditable div using pure JavaScript, without relying on the Rangy library. I want the change to occur on keyup without losing cursor position or focus. Here is an example setup: <div id=" ...

javascripthtmlcontenteditable

Incorporate a line break into a document using JavaScript

Is there a way to make all the items inside document.get on new lines without using paragraph elements? I have tried br/ and \n, but they do not work as expected. They either cause issues with JavaScript execution or fail to create new lines. <scr ...

javascripthtmlnewlineline-breaks

Implementing hover effect triggered by keyboard input

Is there a way to create a hover effect on a div when a specific key is pressed on the keyboard using jQuery? <div id="d-up" class="button"></div> Appreciate any help with this! Thank you. ...

javascriptjqueryhtmlcss

The vertical spacing in Font "bottom-padding" appears to be larger than anticipated

Recently, I purchased the font Proxima Nova for my project and I am encountering issues with vertical alignment. Despite setting margins, line-heights, and padding to match those of Arial, the results are not consistent as the Proxima Nova appears misalign ...

htmlcssfontsless

Improprove Google PageSpeed score - must resolve

My mobile website is loading incredibly slow, despite my attempts to improve the speed using Google PageSpeed insights. Unfortunately, I'm having trouble interpreting the screenshot and identifying what changes need to be made. Is there anyone who c ...

jqueryhtmlcsspagespeedgoogle-pagespeed

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

htmlcssseleniumselenium-webdriver

Issues with rendering AngularJS onto an HTML page are currently being experienced

I was attempting to learn AngularJs in order to improve my front-end development skills, but unfortunately I ran into some issues. Despite following the video tutorials on their site step by step, I couldn't get it to render correctly. Here's the ...

javascripthtmlangularjs

Background image in Bootstrap not covering entire web page

I am facing an issue where the background image is confined within the constraints of the login panel, and I'm unsure why. My goal is for the image to span the full width and height of the browser window. Any assistance on this matter would be greatly ...

htmlcssimagetwitter-bootstrapbackground

Using props as classnames in next.js applications

I am currently attempting to create a dynamic header for each page of my app that changes color based on the current page. Here is my approach: <Header className="headerBitcoin"></Header> My goal is to have the same header component ...

javascriptcssreactjsnext.jscss-modules

The vertical alignment of the wrapper div does not support multiple lines of text

I am having trouble achieving vertical alignment (middle) for a div with 2 lines of text. I can do it with one line, but not two. I want one of the lines to be formatted like a h2 heading, and the other like a regular paragraph. I understand that I could s ...

htmlcss

Tips on how to properly format a DateTime String

I need help with formatting a DateTime string retrieved from an API where it is in the format of YYYY-MM-DDTHH:MM:SS +08:00 and I want to change it to DD-MM-YY HH:MM getDataFromApi(res) { this.timestamp = this.timestamp.items[0].timestamp; console ...

javascripthtmltypescript

Integrate a new Webview Window into an existing iOS App to display locally stored HTML content

Integrate a WebView Window into an existing iOS application to display locally stored HTML content. I have already completed the feed RSS feature in my app, but now there is a requirement for a section that can be easily updated... ...

htmliosuiwebviewwebviewlocal

Utilize JavaScript or JQuery to create a dynamic pop-up window that appears seamlessly on the

Looking to create a unique feature on an HTML page? Want a clickable link that opens a "pop-up" displaying a specific image, right within the page rather than in a new tab or window? Ideally, this pop-up should be movable around the page like a separate ...

javascriptjqueryhtml

Customize Bootstrap radio buttons to resemble standard buttons with added form validation styling

Is there a way to style radio buttons to look like normal buttons while maintaining their functionality and form validation? I have two radio buttons that need styling but should still behave like radio buttons. Additionally, I am utilizing Bootstrap for s ...

javascriptjqueryhtmlcssbootstrap-4

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

javascriptjqueryhtmlcordova

What is the reason for the malfunctioning of this button upon clicking?

Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...

javascripthtmlcss