Home > Article > Web Front-end > Height 100% problem_html/css_WEB-ITnose
Height 100% problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:281193browse
After declaring document mode, the following code height 100% fails to achieve the effect in IE.
1. Do not use the method commented in the header;
2. Do not use the given height.
Is there any good way? Help!
8d2c2a8eff5035fb68199fd4e653ca2c
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
07fa2b4aed0236e22e6d049acdf5af9a-->
b2386ffb911b14667cb8f0f91ea547a7Untitled page6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
a84ebdbd994ad75304f152744d9848c5
8d28bbc0d7e7b09bab5b3b6421805466
d3a57fffda62c78b6d334f335c16cc3f
f70d0ebff76a19226909a4a79919b5e8
04a9424aea79d7e9b86559d6a25ece7c
f8f3d586dc15d52a0cad8a47983d3d90
d3a57fffda62c78b6d334f335c16cc3f
f70d0ebff76a19226909a4a79919b5e8
d93fc120cbb991cbe41c547f366f0598
c34d12f67e0dad146c36d5295bbe48004b98ed942906e0e74ef1b0ba7dc95d6d
d3a57fffda62c78b6d334f335c16cc3f
42b66e0d0835ab3509ca153ea70b990c
52be3623fd3f0874cec74d303a23699602316988d1129bf85d55319dd82c6742
028c8978a801aab69fbfabf6c40af099
42b66e0d0835ab3509ca153ea70b990c
ec4f8564959fa543d4b2f6dd72f312e202316988d1129bf85d55319dd82c6742
028c8978a801aab69fbfabf6c40af099
01fd9eac56fc8ff1cecd34222ee56d08
4dc0f4909dd0df5602d52ec2d80eb175
02316988d1129bf85d55319dd82c6742
028c8978a801aab69fbfabf6c40af099
f70d0ebff76a19226909a4a79919b5e8
b2ad59bebd6f7afa9f4a6ed4e195ac4e
123
02316988d1129bf85d55319dd82c6742
028c8978a801aab69fbfabf6c40af099
01fd9eac56fc8ff1cecd34222ee56d08
02316988d1129bf85d55319dd82c6742
028c8978a801aab69fbfabf6c40af099
01fd9eac56fc8ff1cecd34222ee56d08
4dc0f4909dd0df5602d52ec2d80eb175
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
Reply to discussion (solution)
html,body{height:100%;}
html,body{height:100%;} Tried this, didn't work.
html,body{height:100%;} I tried this, but it didn’t work.
IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html
html,body{height:100%;} I tried this, but it didn’t work.
html,body{height:100%;} I tried this, but it didn’t work.
IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html
Second This method is indeed effective, but I already stated it in advance when asking the question. It does not use the given fixed height and cannot destroy the existing code structure (remove the doctype declaration).
The first method is different from the question. The question is a Table, and the td is across rows. Trying this method did not work.
Oh. Then there is no need for height:100%. This attribute is only effective when the parent defines the height.
You just use position:absolute;top:50%, and then adjust it according to the height: The height of the content block is written as margin-top: - content block height 1/2
Oh. Then there is no need for height:100%. This attribute is only valid when the parent defines the height.
Just position:absolute;top:50%, and then write margin-top:- content block height 1/2 according to the height of the content block
Absolute positioning cannot be used either. The content in the second row is variable, and there will be many such TABLEs.
In fact, the function I want to achieve is very simple, which is to add two left border lines of different colors to the td of multiple TABLEs. It would save trouble if there was only one.
td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue} <!DOCTYPE html><html><head><title>无标题页</title><style type="text/css">/*CSS3 nth-child() 选择器*/td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}</style><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script type="text/javascript">/*$(document).ready(function(){ $("#mytable").find("td").css("border-left", "2px solid red"); $("#mytable").find("td:odd").css("border-left", "2px solid blue");});*/</script></head><body><table id="mytable"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></body></html>
td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue} <!DOCTYPE html><html><head><title>无标题页</title><style type="text/css">/*CSS3 nth-child() 选择器*/td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}</style><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script type="text/javascript">/*$(document).ready(function(){ $("#mytable").find("td").css("border-left", "2px solid red"); $("#mytable").find("td:odd").css("border-left", "2px solid blue");});*/</script></head><body><table id="mytable"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></body></html> This is not right Yes, it is to achieve a column with two left border lines of different colors, so my code above uses a single column spanning two lines. You can open the part I commented in the header and take a look. The screenshot effect: