Question

我希望这不是一个问题太模糊，但我觉得我碰到了一堵砖墙，所以我非常感谢任何反馈。

简而言之，我尝试做的是创建一个简单的网页，其中内容由其他人（编码知识很少）维护。我的想法是在中间设置一个大框架的页面，并在顶部设置标签以改变框架中的内容。（这样，维护页面的人只需要担心框架中显示的各个页面;他们将永远不必对主要网页本身进行更改。）到目前为止，我已经[＆＃39;得到这个很大程度上工作得很好。

我遇到的问题是框架的高度。更确切地说，我对其内部的div有疑问。我希望它可以调整 - 根据它所吸引的内容的高度 - 但我似乎只能手动设置高度。我希望它可调整的原因是因为它为每个标签提取的内容会有所不同。

提前感谢您提出的任何建议......即使它告诉我完全尝试其他解决方案。我的主要目标是创建一些可以由不熟悉任何HTML的人维护的东西。我认为使用框架将是完美的，因为他们可以在Word中更新该部分，但可能还有其他一些我没想到的方法。我对所有建议持开放态度。

*编辑：这是一些示例代码。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Indexfiles\style.css" />
</head>

<body>

<div id="wrapper" style="text-align: center;">
    <div id="menubar" style="display: inline-block;text-align: center;">
                                     <a href="Indexfiles/iframe1.htm" target="Mainframe"><div id="tab"><h6>Tab 1
        </h6></div></a><a href="Indexfiles/iframe2.htm" target="Mainframe"><div id="tab"><h6>Tab 2
        </h6></div></a><a href="Indexfiles/iframe3.htm" target="Mainframe"><div id="tab"><h6>Tab 3
        </h6></div></a><a href="Indexfiles/iframe4.htm" target="Mainframe"><div id="tab"><h6>Tab 4
        </h6></div></a><a href="Indexfiles/iframe5.htm" target="Mainframe"><div id="tab"><h6>Tab 5
        </h6></div></a><a href="Indexfiles/iframe6.htm" target="Mainframe"><div id="tab"><h6>Tab 6
        </h6></div></a>
    </div><br />

    <div id="maincontent">
        <iframe src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
    </div>
</div>
</body>
</html>

Answer 1

如果你使用iframe，你可以使用javascript动态调整iframe的大小以适应内容，如下所示：

var iframe = document.getElementById(iFrameId);
    iframe.width = iframe.contentWindow.document.body.offsetWidth;
    iframe.height = iframe.contentWindow.document.body.offsetHeight;

修改

您可以尝试查看这是否有效：

<script> function resizeIFrame() { var iframe = document.getElementById("MainFrame"); iframe.width = iframe.contentWindow.document.body.offsetWidth; iframe.height = iframe.contentWindow.document.body.offsetHeight; } </script> <div id="maincontent"> <iframe id="MainFrame" onload="resizeIFrame();" src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe> </div>

这就是我的iframe * .htm文件的示例：

<!DOCTYPE html> <html> <head> <title>iframe</title> <style type="text/css"> body { padding:0px; margin:0px; box-sizing: border-box; -moz-box-sizing: border-box; float:left; border:1px solid rgb(200,200,200); } </style> </head> <body> <div style="float:left; width:160px; height:500px;">Frame</div> </body> </html>

重要提示：在测试时，您必须通过网络服务器运行这些文件并将文件放在同一个域中，否则您的浏览器会因安全问题阻止请求。如果您安装了Chrome，则在查看javascript控制台时会看到以下错误消息：

Answer 2

只要div具有id，就可以在包含的css文件中更新它的高度。

your_page.html：

<link rel="stylesheet" href="your_style.css" /> 
<div id="your_frame">
[Frame Contents]
</div>

your_style.css：

#your_frame{
  height: 40px // Just tell your developers to change this number (they'll never have to open the html file).  Also, if you have google chrome, you can fiddle with this number in the Developer tools.
}

根据具体情况，您可以使用javascript更智能地设置高度。

修改这是一种需要更少维护的方法：你的html页面里面的div：

<div id="your_frame"> <div id="your_contents"> Contents Go Here <br> <br> More Contents <br> Even more contents </div> </div>

css：

#your_frame{ border-style:solid; # <-- using a solid border so you can play with these code chunks in JSfiddle.net #height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents) } #your_contents { #height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents) margin-top:10px; # <-- I think what you're really after is the margin adjustments margin-bottom:10px; margin-left:10px; }

Answer 3

默认情况下，div会自动延伸到其父容器的高度。此行为的更改通常与其子项的位置属性相关。例如，如果所有div子项都是绝对定位的，则div的高度将处于其默认高度。我没有你正在做的事情的例子所以我只能猜测你的问题的原因。

或者，如果您对替代品持开放态度。您提供的方案通常通过使用内容管理系统来解决。您只需根据自己的需要自定义外观。

http://en.wikipedia.org/wiki/Web_content_management_system

我可以将div的高度设置为灵活吗？

3 个答案: