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

【问题标题】：How to set width dynamically for included .html file如何为包含的 .html 文件动态设置宽度
【发布时间】：2013-09-20 09:50:20
【问题描述】：

我已经设计了主页并把它做成了一个单独的 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;
}

【问题讨论】：

请向我们展示您的 html 和任何相关代码。
添加一些 index.html 代码以及在其中包含其他页面的方式。
如何在索引页面中显示其他页面？你在使用 AJAX 吗？
@Archer 我已经编辑了帖子
无论如何...如果您在索引页面中包含其他页面，您只需将其宽度属性设置为自动。然后其他页面应该有一个宽度，例如。 800像素。此外，包含的页面位置属性不应为绝对或固定。这样您就可以通过更改其他页面的宽度来调整两者的大小。

标签： html css jsp templates

【解决方案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....

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

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

【讨论】：

【解决方案2】：

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

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

为了解决这个问题，我会这样做：

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

其他注意事项：

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

【讨论】：