Height 100% problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

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!

Untitled page

123

Reply to discussion (solution)

html,body{height:100%;}

Copy after login

html,body{height:100%;}

Copy after login

Tried this, didn't work.

html,body{height:100%;}

Copy after login

I tried this, but it didn’t work.

IE6
http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html

html,body{height:100%;}

Copy after login

I tried this, but it didn’t work.

html,body{height:100%;}

Copy after login

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}

Copy after login

<!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>

Copy after login

td:nth-child(odd){border-left:2px solid red}td:nth-child(even){border-left:2px solid blue}

Copy after login

<!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>

Copy after login

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:

Related labels：

Height 100%的问题

source：php.cn

Previous article：CSS3 photo wall_html/css_WEB-ITnose Next article：Pure CSS implements the tooltip prompt box. The continuation of CSS arrows and shapes adds a border to the entire tooltip prompt box.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn