Question

好的，问题很简单：

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

下面的代码确实如此（我没有找到更好的方法，如果你这样做，请告诉我:)）

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

http://stefan.apsaa.eu/test/test.html - 然后只需在test.html前放一个“x”并再次输入....在firefox ....

如此。如果你们知道如何修复它，或者知道一种更好的方法，可以同时使用xhtml和html，我将不胜感激

为了清楚：我想要一个可变宽度和高度:)（滚动条仅作为示例给出）

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

Answer 1

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

W3C validator抱怨您的信息页。

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

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

2 个答案: