1

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

2 回答 2

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

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

工作真的很好...

于 2013-09-23T04:31:06.033 回答
0

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

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

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

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

其他需要注意的事项：

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