Question

我设计了主页，并将其作为一个单独的index.html文件，我有这么多其他页面，

这些页面执行某些操作，但我没有为这些页面设计UI。我已经在所有这些页面中包含了index.html文件。现在我得到了背景信息。

但正在发生的事情是当我增加某个页面内容的宽度时，宽度会增加但是index.html的宽度没有得到应用..

看起来像是这样的

--------------------
|   index.html     |
|  --------------------
|  |                  |
|  |                  |
|  |    other page    |
|  |__________________|
--------------------

当我增加另一页的宽度时，index.html页面的宽度也应该增加..

我该怎么做

index.html的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <title>X---todo---X</title>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="frame">
            <div class="backbody">
                <div class="header">
                    <img src="images/logo.png" class="logo">
                    <table border="0" class="tabs">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="mitem1"><span class="mitem"><a href="#">mq</a></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="mitem1"><span class="mitem"><a href="#">mb</a></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="mitem1"><span class="mitem"><a href="#">m6</a></span>
                                    </div>
                                </td>
                                <td>
                                    <div class="mitem2"><span class="mitem"><a href="#">ml</a></span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="body"></div>
            <div class="footer"></div>
        </div>
    </body>
</html>

html的相关css

body{
}

.header{
    background:rgba(10, 10, 10, 0.64);
    height:110px;
    width:100%;
}

.backbody{
    background:url(../images/aya.jpg);
    width:100%;
    height:520px; 
}

.footer {
    background: none repeat scroll 0 0 #333333;
    color: white;
    height: 60px;
    position: relative;
    width: 100%;
}

.body{
    width:100%;
    height:700px;
}

.frame {
    box-shadow: 3px -2px 10px;
    height: auto;
    position: relative;
    width: 100%;
}

.mitem > a {
    color: white;
    font-size: 80%;
    font-weight: bold;
    text-decoration: none;
}

.mitem1:hover{
    background:#E07F1D;
    width:auto;
    color:black;
    border-radius:10px;
}    

.mitem2{
    background:#E07F1D;
    width:auto;
    border-radius:10px;
}     

.mitem1,.mitem2 {
    padding: 6px 20px 7px 20px;
}

.tabs {
position:relative;
top:48px;
left:-15px;
float:right;
} 

.logo{
    position:relative;
    left:20px;
}

Answer 1

谢谢大家.. :) 我终于找到了使用jquery的解决方案...

实际上jsp页面包含动态扩展的表..

当表动态增加时，背景的高度也应该增加..

所以我想用jquery动态设置背景高度

我使用的算法是：

on document ready

    step-1 > get the height of particular table 

     step-2 > add some default given value with height value

       step-3 > get the added value and set that value to reset the background height..

    it worked quite really good....

同样我也适用于宽度，有一些小的变化......

工作真的很好......

Answer 2

我不是JSP'foendi'，但这一切都归结为html和css，并且知道如何使布局正确。

听起来我的索引页面有一个固定的宽度。

要解决这个问题，我就是这样做的：

确保您的索引页面的宽度属性设置为auto。请注意，如果包含的页面不是绝对的或固定的，则包含的页面将确定两者的宽度。

其他注意事项：

如果没有包含的页面有宽度或任何内容，它可能不会显示任何内容，因为那时宽度将为0.
您可以设置索引页面的填充左侧和填充右侧，其中插入了另一个页面。为了让它看起来更好，否则它看起来就像一件事。这只是一个提示。
我建议给索引页一个固定的宽度，你只需将其他页面加载到div或任何你想要更改的标记中。你必须适应其他页面。让它适合。

如何为包含的.html文件动态设置宽度

2 个答案: