Question

好吧我正在使用XHTML1.1，因为HTML5 ...没有按照我的预期行事，如果有人能提供一个体面的教程，我很乐意看到它，到目前为止我写的任何东西在HTML5中不会在任何其他浏览器中呈现，但Chrome＆gt; _＆gt ;; 。

现在回到我的问题。

<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的区别）。有人想提供一个提示吗？只需一个关键字＆gt; _＆lt ;;

感谢您阅读

Answer 1

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

将这个插入你的CSS以上其他所有内容，看看我的意思：

html,body{height:100%;}

XHTML忽略高度

1 个答案: