XHTML忽略高度

好吧我使用的是XHTML1.1，因为HTML5 ...没有像我期望的那样行事，如果任何人都可以提供一个体面的教程我很乐意看到它，到目前为止我在HTML5中编写的任何内容都不会在其他任何浏览器中呈现，但Chrome> _>; 。XHTML忽略高度

现在回到我的问题。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style> 
    #Content{ 
     position: relative; 
     background-color: #8CF; 
     padding: 1%; 
     border-color: black; 
     border-style: solid; 
     border-left-width: 1px; 
     border-right-width: 1px; 
     border-bottom-right-radius: 10px; 
     border-bottom-left-radius: 10px; 
     height: 100%; 
    } 


    #Announcer { 
     position: relative; 
     background-color: #6AF; 
     padding: 1%; 
     border-color: #6AFFFF; 
     border-width: 1px; 
     border-style: inset; 


    } 

    #Column_Holder { 
     position: relative; 
     background-color: #6CF; 
     padding: 1%; 
     height: 100%; 


    } 

    .Column { 
     float: left; 
     padding: 1%; 
     overflow: auto; 
     height: 100%; 
    } 

    #Col1 { 

     width: 60%; 
     border-color: black; 
     border-style: solid; 
     border-right-width: 1px; 
     border-width: 1px; 

    } 

    #Article_Image { 

     background-color: #3DE; 
     position: relative; 
     float: right; 
     width: 20%; 
     text-align: right; 
    } 

    #Col2 { 
     width: 30%; 

     padding-left: 3%; 
    } 



    </style> 
</head> 
<body> 
    <div id="Content"> 

     <div id="Announcer"> 
      <h2>Announcer Place Holder</h2> 
     </div> 
     <div id="Column_Holder"> 
      <div class="Column" id="Col1"> 
       <div id="Article_Image">Image PlaceHolder</div> 
       <h1>Lots a text</h1> 
       <p>Creating Websites since 1989. I have created lots and lots of websites. This one is with XHTML1.1 and CSS3</p> 
      </div> 
      <div class="Column" id="Col2"> 
       <h2>Another story</h2> 
       <p>Something else happened teh other day =3</p> 
      </div> 
     </div> 

    </div> 
</body> 
</html>

我试过使用浮动......它不适合作为这种情况下的解决方案。我试过100％的高度，XHTML似乎完全忽略了这个指令。除非我声明一个像素高度，否则它会被奇怪地忽略（是的，我正努力从HTML中获得这种差异）。任何人想提供一个提示？只需一个关键字> _ <;

感谢您阅读

来源

2012-02-18 Ravenshade

你的意思是你的＃内容？ – 2012-02-18 04:49:28

首先，认真？ XHTML和没有XHTML doctype？
百分比是相对度量单位。这意味着无论您放置百分比尺寸，它都取决于父级。现在，宽度不需要父级为相对性声明宽度，但高度确实如此。因为#Content是身体的孩子，你需要身体有一个身高（比如说100％）。身体是<html>标记的孩子，并且对于身体的100％工作，您需要具有100％的html。

这个插件在你的CSS高于一切，看看我的意思是：

html,body{height:100%;}

来源

2012-02-18 05:06:49 Joseph

XHTML文档类型是在那里，我只是没有复制代码的那部分，这是... o.O有趣的是，我没有意识到xhtml是挑剔的。让我去尝试一下。 - 编辑 - 够公平的，xhtml是'那'挑剔。感谢您的帮助。 – Ravenshade 2012-02-18 05:28:47

回答

相关问题