XHTML 忽略高度

发布于 2025-01-06 23:48:05 字数 2423 浏览 3 评论 0原文

好吧，我正在使用 XHTML1.1，因为 HTML5 的行为不符合我的预期，如果有人可以提供一个像样的教程，我很乐意看看它，到目前为止我用 HTML5 编写的任何内容都没有除 Chrome 之外，不会在任何其他浏览器中呈现 >_>; 。

现在回到我的问题。

<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 的这种差异）。有人想提供提示吗？只需一个关键字>_<;

感谢您的阅读

原文

Okay I'm using XHTML1.1 due to the fact that HTML5...doesn't behave as I expect, if anyone can provide a decent tutorial I'd be happy to look at it, so far anything I write in HTML5 doesn't render in any other browser but Chrome >_>; .

Now back to my problem.

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

I've tried using floats...it's not appropriate as a solution in this instance. I've tried 100% height, Xhtml seems to completely ignore that instruction. Unless I declare a pixel height it's ignored strangely (yeah I'm struggling with this difference from HTML). Anyone want to provide a hint? Just a keyword >_<;

Thanks for reading

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盛夏尉蓝 2025-01-13 23:48:05

首先，认真的吗？ XHTML 和没有 XHTML 文档类型？< /strong>
百分比是相对测量单位。这意味着无论您放置百分比尺寸，它都取决于父级。现在，宽度不需要父级为相对性声明宽度但高度需要。因为#Content是body的子级，所以您需要body具有高度（比如 100%）。 body 是标记的子级，为了使 body 的 100% 正常工作，您需要为 html 设置 100%。

将其插入到你的 CSS 中，高于其他所有内容，看看我的意思：

html,body{height:100%;}

first of all, seriously? XHTML and without the XHTML doctype?
percentage is a relative unit of measurement. this means that whatever you place percentage dimensions, it depends on the parent. now, width doesn't have the need for the parent to have width declared for relativeness but height does. since #Content is a child of body, you need body to have a height (like say 100%). body is a child of the <html> tag, and for body's 100% to work, you need to have 100% for html.

plug this in your CSS above everything else to see what i mean: