Member Avatar for bryanhiehle

i cant get the table to cover the whole page in height. so when you use different sizes of moniotrs. it always covers the height size.

i have it so width=500
and it is centered. thanks if any1 can help

  • 7 Contributors
  • 9 Replies
  • 111 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: percentage heights only work when the containing chain has a definite height, so the “set table to 100%” approach you saw in earlier replies will fail unless the root elements are sized. For a reliable, modern result use viewport units or a flexbox wrapper so the table can stretch to the visible window without relying on parent percent values (this also addresses the cross‑browser quirks mentioned). See MDN on percentage heights for the underlying rule: MDN: percentage heights.

Two practical approaches (pick one):

  • Flexbox wrapper (recommended). Make a full‑viewport wrapper and let the table be a flex child that stretches vertically while staying centered horizontally.
.page-wrap {
  min-height: 100vh;
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: stretch;      /* let immediate child fill height */
}

.page-wrap > .page-table {
  width: /* your fixed width in pixels */;
  border: 1px solid #000;
  /* as a flex item the table will span the wrapper height */
}
  • Viewport units (simpler, but watch mobile). Give the table a height based on the viewport (or subtract header/footer with calc). Mobile browsers can treat 100vh oddly; use the small JS fallback if you want stable behaviour on phones:
/* JS (run on load + resize) */
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

/* CSS */
.page-wrap { min-height: calc(var(--vh) * 100); }

Notes and UX tips: avoid using tables for page layout when possible; use semantic containers and CSS Grid/Flexbox for layout. If supporting very old browsers, provide a simple fallback (root with a fixed height so percentage rules resolve) or accept scrollable content rather than forcing exact viewport fits. For more reading on flex layouts and viewport units, see MDN: Flexbox guide and the practical mobile-viewport notes at CSS-Tricks. This builds on the earlier suggestions from , and while addressing ’s browser‑compat cautions.

Recommended Answers

All 9 Replies

Member Avatar for Cyanide2600

Can you not set it to height="100%"?

Are you setting the table properties in the html or a css file?

Member Avatar for bryanhiehle

yeha i set height to 100 in html code. what does the auto property do for height?

Member Avatar for itsjareds

Make sure that you include the percent sign (%) after 100 so that it looks like height: 100%;

Member Avatar for Cyanide2600

So you'd use something like: <table height="100%" width="500" align="center"> That would set the height to 100% of the window and the width to 500 pixels, this would change the height depending on the size of the screen but the width will stay the same.

Hope thats what you're after

Member Avatar for MJ Pieterse

otherwise you can also try min-height="100%"

Member Avatar for itsjareds

Yep, what MJ said should work. Here's an example:

<table style="min-height: 100%; height: 100%; width: 500px; margin: 0 auto; border: 1px solid black;">

Defining an absolute width then margin: 0 auto is a better way to center any block element.

Member Avatar for JugglerDrummer

margin: auto allows the browser to adjust the margin as needed, sticking stuff in the center. I don't think you can specify %'s in the width attribute, only in the style property.

Member Avatar for sreein1986

Hi,

if you want your webpage hieght or widht to fit into your browser give height or width in percentize(100%)

Member Avatar for MidiMagic

You can not set the size of something to exactly fit the height of the browser window in a way that works on all browsers. Do not waste your time trying to do this.

When width and height conflict in the sizes they need for an object, width has priority over height.

With some browsers, 100% height is 100% of the height of the document, not the browser window.

The display of web pages is not intended to exactly fill the screen in the vertical direction. This use was never intended. It is designed to expand downward until all of the content is rendered.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.