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

回答

相關問題