Can someone tell me how I can make a table be 100% height in Mozilla browsers?
this is the html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="177" height ="100%">
<tr>
<td height="100%"> </td>
</tr>
</table>
</body>
</html>
Maybe this can give you a hint?
<head>
<style type="text/css">
html, body{
margin:0;
padding:0;
height:100%;
border:none;
}
table {
height: 100%;
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</body>
Sounds like you're laying your page out in a table, which you really shouldn't be doing. It's better to mark up your page properly rather than laying everything out in tables.
As the above answer shows, you use CSS to do this.
Setting the html, body height to 100% so that the contents can use its parents height:
html, body { height: 100%; }
And then setting your tables height to 100%:
table { height: 100%; }
This should result in the desired effect.
You can't: 10.5 Content height: the 'height' property
Related
I have a pretty standard two-column layout, but one element in the content-column needs to deliver its content in a horizontally-scrolling area whose (visible) width fills the remainder of the page, i.e. fills the width of its containing column. I can get (almost) the effect I need by setting a fixed width on the scrolling area, but I need its width to be dynamic. Can this be done with just HTML and CSS, or do I need to manually set and update its width with JS?
Here is a fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout</title>
<style type="text/css">
div.top-menu { background-color: blue; height: 100px; color: #fff }
td.side-content { background-color: green; width: 150px; }
div.scrollable-area { width: 400px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
div.scrollable-area > div.content-block { display: inline-block; padding: 5px; border: 1px solid #000; }
</style>
</head>
<body>
<div class="top-menu">(Top menu)</div>
<div>
<table>
<tbody>
<tr>
<td class="side-content">(Side content)</td>
<td>
<h1>Title</h1>
<div class="scrollable-area">
<div class="content-block">BLAH BLAH</div>
<div class="content-block">BLAH BLAH</div>
(ETC)
<div class="content-block">BLAH BLAH</div>
<div class="content-block">BLAH BLAH</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Add these styles to your table:
table {
width: 100%;
table-layout: fixed;
}
You can then remove the width style from div.scrollable-area.
Fiddle
I have a div inside a table that is overflowing the screen size. It looks like this:
<table id="hlavni" style=" position:absolute; border:none; position:relative; background-color:#FFC; border:#999 1px solid;" cellpadding="5">
<tr>
<td id="yamana" class="trida" valign="top" style="line-height:1.5em;">
<div style="background-color:#FFC;" id=load_tweets>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
</td>
</tr>
</table>
How can I prevent it from overflowing?
<html>
<head>
<style type="text/css">
#limit {
max-width: 500px;
}
</style>
</head>
<body>
<div id="limit">Your content goes here</div>
</body>
</html>
max-width and width -both- do not prevent the overflow if the text does not contain any spaces as in the example in the question.
div {
max-width : 300px;
word-wrap: break-word;
}
see this fiddle for a solution.
For this case, the div must have the style "word-wrap: break-word"
in order to work.
Or "overflow-wrap: break-word"
With max-width . Example : http://jsfiddle.net/YCV8H/
I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to just cut off the text and hide the rest.
Is this possible using CSS, etc?
IE only
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
height: 20px;
overflow: hidden;
width: 25%;
}
<table id="fixedheight">
<tbody>
<tr>
<td>content</td>
<td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</td>
<td>more content</td>
<td>small content</td>
<td>enough already</td>
</tr>
</tbody>
</table>
Universal solution
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
width: 25%;
}
#fixedheight td div {
height: 20px;
overflow: hidden;
}
<table id="fixedheight">
<tbody>
<tr>
<td>
<div>content</div>
</td>
<td>
<div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div>
</td>
<td>
<div>more content</div>
</td>
<td>
<div>small content</div>
</td>
<td>
<div>enough already</div>
</td>
</tr>
</tbody>
<table>
Set the CSS height property to what you want the cell heights to be, and use overflow: hidden (see CSS overflow) to prevent contents from expanding the cells.
Give the table a class:
<table class="myTable">...</table>
And in the CSS, try the following:
table.myTable td {
height: 20px;
overflow: hidden;
}
The CSS Styles you will want to set are:
display:block, min-height, and max-height.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{font-size:16px;}
table{}
table tr{
display:block;
border-bottom:solid green 1px;
height:.8em;
min-height:.8em;
max-height:.8em;
background-color:#E300E3;
overflow:hidden;
}
</style>
</head>
<body>
<table id="MyTable">
<tr><td>16px Font-Size</td><td>Column2</td></tr>
</table>
</body>
</html>
please can some brilliant person help me with this page layout or tell me if it is possible?
Trying to embed some flash content which resizes with the browser but has a 400px margin on the left and a 200px margin at the bottom. Have managed to get the margin on the left but cannot get the bottom margin to stay within the browser.
My div looks like this:
<div style="height:100%;margin-left:400px;">
<div id="flashcontent"></div>
</div>
The swf is embedded with swfobject into the flashcontent div dynamically, Any help with this would be greatly appreciated.
Mike
If you can afford not to support IE6, I guess you could work with position: fixed.
It's not very elegant but from the sound of it (you don't seem to have any other layout considerations to take care of on this page), it might do.
<div style="position: fixed; left: 400px; top: 0px; right: 0px; bottom: 200px;">
<div id="flashcontent"></div>
</div>
I can't test this right now, but the flashcontent div should now be able to resize according to the outlying div.
<!-- This comment makes IE render in quirks mode.. We want IE in quirks mode -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
.flash-container {
height:100%;
background-color: #f00;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0 0 200px 400px;
}
.flash {
background-color: #fff;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="flash-container">
<div class="flash">
...Replace this Div with Flash
</div>
</div>
</body>
</html>
Pekkas answer is pretty good, I didn't consider the option of setting all edges. But I also made this table proposal, which should work in just about all browsers since the dawn of time.
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<body style="padding:0;margin:0;height:100%;">
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:400px;">1</td>
<td style="background-color:red;">2</td>
</tr>
<tr style="height:200px;">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table, tbody, tr {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border-style: none;
}
tr#MainTitle
{
height: 70px;
}
div#test {
height: 100%;
background-color: blue;
}
/* If I remove the 100% here then the scrollbars are removed and the cell still fills the window but the div no longer fills the cell. */
td.MainMenu {
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main">
<tbody>
<tr id="MainTitle">
<td>Title</td>
</tr>
<tr id="MainMenuRow">
<td valign="top" class='MainMenu' id='MainMenu'><div id="test">Test</div></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
(edit) I've tried to simplify the issue. I have a table. I want the top title row to be fixed in size and the next content row to fill the remaining screen.
As I have it set up if the content cell is height:100% Then the page is larger than the window (by the size of the title row) yet if I switch this to auto the cell is the right size for the window but the contained div does not fill the cell.
Whats going on?
tr does not accept height attribute. You need to set that on td or th element. This code should do the work.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
html, body, form, table {height: 100%;width: 100%;margin: 0px;padding: 0px;border:0;}
tr th {height:70px;}
tr td {background-color: blue;position:relative;vertical-align:top;}
.text {position:relative;height:100%;width:100%;background:yellow;}
</style>
</head>
<body>
<form name="form1" method="post" action="#" id="form1">
<table id="Main" cellpadding="0" cellspacing="0">
<tr>
<th>Title</th>
</tr>
<tr>
<td><div class="text">Test</div></td>
</tr>
</table>
</form>
</body>
</html>
The problem is being caused by the default margins on the BODY element in your code. You are specifying that the BODY should take up 100% of the available space, but by default, the BODY tag will add a margin to this, causing your elements to take up slightly more than 100% of the available screen space.
You can fix this by adding the following to your BODY style:
html, body, form {
height: 100%;
margin: 0px;
}