CSS 非常棘手的问题：Xhtml 的高度问题答案

【问题标题】：CSS very tricky problem: Height issue with XhtmlCSS 非常棘手的问题：Xhtml 的高度问题
【发布时间】：2011-01-14 02:34:56
【问题描述】：

好的，问题很简单：

我有一个可变宽度和高度的 div，我想在它旁边放置另一个“元素”，它基本上是一个由 3 个组件（顶部固定、中间可变高度、底部固定）组成的栏，就像任何滚动条。而且，就像任何滚动条一样，我希望始终是它“附加”到的 div 的大小，而不管它的大小和调整大小。

下面的代码可以做到这一点（我还没有找到更好的方法，如果你找到了，请告诉我:)）

但现在这是诀窍。如果您将文件名从 test.html 更改为 test.xhtml（就是这样！），它将停止工作。查看示例（在 Firefox 中）并亲自查看（在 Chrome 中有效）

http://stefan.apsaa.eu/test/test.html - 然后只需在 test.html 前面放一个“x”，然后再次按回车键......在 firefox 中......

所以。如果你们知道如何解决它，或者知道一种同时适用于 xhtml 和 html 的更好方法，我将不胜感激

明确一点：我想要一个 VARIABLE WIDTH 和 HEIGHT :)（滚动条只是作为示例）

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en-ca">
 <head>

    <style>
        .handle{
            width               : 5px;
            height          : 100% !important; 
            margin          : 0;
            padding             : 0;
            overflow            : hidden;
        }
        .handle a{
            position : relative;
            display             : inline-block !important; 
            height              : 100% !important;
            text-decoration : none;
        }
        .handle a:hover{
            height  : 100% !important;
        }
        .handle-top{
            background  : url(images/borders/standard/border-top.png) no-repeat 0 0;
            height      : 100% !important;
        }
        .handle-middle{
            background      : url(images/borders/standard/border-mid.png) repeat-y 0 0;
            height          : 100% !important;
        }
        .handle-bottom{
            background  : url(images/borders/standard/border-bot.png) no-repeat 0 100%;
            height      : 100% !important;
        }
    </style>

 </head>

 <body>
    <table cellspacing="0" cellpadding="0" class="wrapper" style="margin: 0px;">
        <tbody>
            <tr>
                <td class="handle">
                    <a href="#">
                        <div class="handle-top">
                            <div class="handle-bottom">
                                <div class="handle-middle">!</div>
                            </div>
                        </div>
                    </a>
                </td>
                <td width="100%" class="contentHolder">
                    <div class="section tCollapsible" style="margin: 0px;">
                        <h4>This is a DIV</h4>
                        Test<br />asdsa
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
 </body>
</html>

【问题讨论】：

用于布局的表格？不不不不不不不不不！
这是一个 javascript 应用程序......所以还不错
如果你找到了无表的方式，请分享
您的页面未通过验证。这可能是原因

标签： html css firefox xhtml height

【解决方案1】：

您的服务器正在为具有普通“.html”扩展名的文件发送“text/html”的“Content-Type”，为“.xhtml”文件发送“application/xhtml+xml”。这导致 Firefox 更严格地处理文档。

W3C validator 抱怨您的页面。

【讨论】：

我向验证器发送了您链接的页面，但它无效。因为这是我唯一的代码，所以这是我能做的最好的。这绝对是一个涉及 Content-Type 的问题。即使您的 doctype 说它是 xhtml，如果服务器说它是“text/html”，这就是浏览器会相信的。

【解决方案2】：

如果你有这样的标记：

<div class="scroll-container">
  <div class="content"></div>
  <div class="scroll-bar">
    <div class="up-button"></div>
    <div class="track"></div>
    <div class="down-button"></div>
  </div>
</div>

这样的 CSS 应该可以工作：

.scroll-container {
    position: relative; /* really, any non-static will do */
    width: 800px;
    height: 300px;
}

.scroll-container .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 20px;
    overflow: hidden;
    background-color: red;
}

.scroll-container .scroll-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    right: 0;
}

.scroll-container .scroll-bar .up-button {
    position: absolute;
    top: 0;
    height: 20px;
    left: 0;
    right: 0;
    background-color: green;
}

.scroll-container .scroll-bar .down-button {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
    background-color: blue;
}

.scroll-container .scroll-bar .track {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    right: 0;
    background-color: yellow;
}

更新：

好的，这里是如何修改它，使它的高度可变（被滚动条的东西弄糊涂了）：

.scroll-container {
    position: relative; /* really, any non-static will do */
}

.scroll-container .content {
    margin-right: 20px;
    background-color: red;
}

更新 2：

使用您发布的相同 CSS 类更新示例：

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
        .container {
            position: relative; /* really, any non-static will do */
        }

        .container .content {
            margin-left: 5px;
            background-color: red;
        }

        .container .handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px;
            left: 0;
        }

        .container .handle .handle-top {
            position: absolute;
            top: 0;
            height: 5px;
            left: 0;
            right: 0;
            background-color: green;
        }

        .container .handle .handle-bottom {
            position: absolute;
            bottom: 0;
            height: 5px;
            left: 0;
            right: 0;
            background-color: blue;
        }

        .container .handle .handle-middle {
            position: absolute;
            top: 5px;
            bottom: 5px;
            left: 0;
            right: 0;
            background-color: yellow;
        }    
    </style>
  </head>
  <body>
    <div class="container">
      <div class="handle">
        <div class="handle-top"></div>
        <div class="handle-middle"></div>
        <div class="handle-bottom"></div>
      </div>
      <div class="content" style="width: 400px; height: 623px">
      </div>
    </div>
  </body>
</html>

【讨论】：

啊等等，不，抱歉，这根本不是我要找的……我想要一个高度和宽度可变的容器。刚刚提到了滚动条，因此您可以了解图片的外观，而不是实际的滚动条