All geek questions in one place

Getting a table to fill 100% height in td

I am trying to rewrite the site in proper HTML. The site I'm trying to replace was a complete mess. I ran into a problem when I cannot get <table> to fill in the height of the <td> in which it was contained. I tried setting height: 100% on <table> , which is based on google and stackoverflow studies should work, but I have to miss something stupid. I tried to do the same with <divs> before switching to tables, but I do not mind returning to <divs> if anyone can suggest how to do this.

The content that I am currently developing is here: http://96.0.22.228/

Due to project time limits, I had to use bad hacks to make the pages look right. I do not declare <doctype> , and I force IE to use IE7-quirks mode. I would like to receive recommendations on the correct use of this layout using HTML5 and CSS. It should not support older browsers, but it should look the same in recent versions of Chrome, Firefox, and IE. I would also like to do away with the images for the menu and style everything in CSS for the frame and menu text.

Despite the fact that I had to fill out the site as is, I am open to return and fix later if there is a good answer to this problem.

+4
source share
5 answers

100% height in a table cell is always a pain. Technically speaking, TD has no height (because it depends on its contents). What you are asking the browser is to make the child 100% of his parent, which is 100% of his child, which is 100% of his parent ... You can see how this can be a problem.

You can try adding an explicit height to the TD and use the layout table: fixed in the table. At least so, the browser knows the height of the parent without requiring the height of the child, but this may still not work.

You may need to rethink how you do this.

+9
source

I have one solution, if you need your desired results, you can edit your add-on (td.navigation a class link) . You will get your results.

apply this css: -

 td.navigation a { color: #837768; display: block; font-size: 1.2em; padding: 14px 5px; text-align: center; text-decoration: none; }
0
source

So, this is done here with divs, absolute positioning in%, and here is the part that you don’t like, with a certain height specified in pixels. The problem is that if you use table cells (td), td has no height, and so any element inside will calculate 0 for 100% height.

When we use a div, the problem is different. We can make sure that they retain their height property, but there is no way to tell the div on the left, "be the same height as the div in the center." At least I don’t know. At the same time, it seems that your flash object is the highest thing, and you can easily set the height of all three divs in the ideal number of pixels. Then stretch the ul navigation list to a height of 100% of the div enclosed in it.

There is another way to do this, which can satisfy your needs better, I will tell you in detail at the very bottom.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>TheDavidFactor Layout</title> <style type="text/css"> body, html { background: black; width:100%; height:100%; padding:0; margin:0; } #left { position:absolute; top:10%; left:0; background: #eeeeee; width: 20%; padding: 2%; margin:0; } #right { position:absolute; top:10%; left:76%; background: #eeeeee; width: 20%; padding: 2%; margin:0; } #center { position:absolute; top:10%; left:24%; background: #dddddd; width: 48%; padding: 2%; margin:0; } #flash { background:red; width: 500px; height: 500px; padding:0; margin:0; } ul { height: 500px; padding:0; margin:0; padding-left:25px; background: #4359ac; color: #ffffff; } li { height: 10%; padding:0; margin:0; } </style> </head> <body> <div id="left"> <ul> <li>Spa</li> <li>Hotel</li> <li>Activities</li> <li>Hobbies</li> <li>Night Life</li> <li>Food</li> <li>Feedback</li> <li>Contact</li> <li>About Us</li> <li>Copyright</li> </ul> </div> <div id="center"> <div id="flash">Here your flash Object</div> </div> <div id="right"> here the right div <br> <p>Let throw some random text in here to take up space for now.</p> </div> </body> </html>

Another option you have is to wrap three columns in a container div and determine the height for that div, and then stretch each of the columns to 100% height inside that div container.

0
source

The best solution for this is to have the parent button element have a height of 100% if you want your button to have a height of 100%.

eg

 <tr> <td><button class="btn" id="1">1</button></td> <td><button class="btn" id="2">2</button></td> <td><button class="btn" id="3">3</button></td> <td><button class="btn" id="plus">+</button></td> <td rowspan="2"><button class="btn btn-block" id="equals">=</button></td> </tr>

CSS

 td{ height: 100%; } .btn { width: 100%; height: 100%; }

This should work well.

0
source

/// how to set the height of the main table

 <table bordercolor="#f6f6f6" style="height:100px;"><tr> <td style="padding:0px; padding-top:0px;"> <table style="height:100%; width:100%;"> <tr> <td style="border-right:1px solid #f6f6f6; width:50px;">Test1</td> <td>Test2</td> </tr> </table> </td></tr></table>
0
source

Source: https://habr.com/ru/post/1403386/

More articles:


All Articles