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

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，并且知道如何正确使用布局。

在我看来，您的索引页具有固定的宽度。

为了解决这个问题，这就是我要解决的方法：

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

其他注意事项：

如果没有任何包含页面的页面具有宽度或内容，则该页面可能不会显示任何内容，因为那样的话宽度将为0。
您可以设置要插入另一页的索引页的padding-left和padding-right。 它看起来更好，否则看起来就像一件事。 这只是一个提示。
我建议给索引页一个固定的宽度，您只需在其中将其他页面加载到div或要更改的任何标签中即可。 您必须将另一页放进去。使其适合。

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

问题描述

2 个解决方案

解决方案1
1 2013-09-23 04:31:06

解决方案2
0 2013-09-20 10:31:04

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

问题描述

2 个解决方案

解决方案1 1 2013-09-23 04:31:06

解决方案2 0 2013-09-20 10:31:04

解决方案1
1 2013-09-23 04:31:06

解决方案2
0 2013-09-20 10:31:04