更改固定页面中的可变内容

Question

I should create a index page that some parts like header and footer are fixed but the main content is changeable , I think I have to set my content into a iframe and change the iframe src with javascript but I dont have any idea how to do this. 我应该创建一个索引页面，其中某些部分（如页眉和页脚）是固定的，但主要内容是可变的，我想我必须将内容设置为iframe并使用javascript更改iframe src，但我不知道如何执行此操作。 How can I do this ? 我怎样才能做到这一点？ is there any other solutions? 还有其他解决方案吗？

Answer 1

Hi perhaps there are better options to consider than frames (which is "bad" practice) if is suitable for your project you could use jquery based scripts as Pagify 嗨，也许有比框架更好的选择（这是“不好的”做法），如果适合您的项目，则可以使用基于jquery的脚本作为Pagify

or some other of your choice: JQUERY ONE PAGE SCRIPTS In that way you will represent your content in better modern way. 或您选择的其他任何一种： JQUERY一页脚本用这种方式，您将以更好的现代方式表示您的内容。 But it always depends on what the final result must be. 但这始终取决于最终结果必须是什么。 So if is not the answer please give some more details. 因此，如果不是答案，请提供更多详细信息。

Answer 2

You can do it with css 你可以用CSS做到这一点

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
body {
    margin: 0px;
}
#wrapper {
    width: 1000px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#wrapper #header {
    width: 1000px;
    height: 80px;
    background-color: #C90;
    position: fixed;
    float: left;
}
#wrapper #main {
    float: left;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #333;
    padding: 5px;
    width: 990px;
    margin-top: 80px;
margin-bottom: 80px;
}
#wrapper #footer {
    background-color: #C60;
    height: 80px;
    width: 1000px;
    position: fixed;
    bottom: 0px;
    float: left;
}
</style>
<script>

</script>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            Header
        </div>
        <div id="main">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
          <p>.....</p>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

Then you can load data from server to with using Ajax 然后您可以使用Ajax将数据从服务器加载到

更改固定页面中的可变内容

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-03-25 10:14:34

解决方案2
0 2013-03-25 10:15:09

更改固定页面中的可变内容

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-03-25 10:14:34

解决方案2 0 2013-03-25 10:15:09

解决方案1
0 已采纳 2013-03-25 10:14:34

解决方案2
0 2013-03-25 10:15:09