Question

我的问题是我有一个网站我正在研究它有一个主要包装div为所有内容然后我有一个div为横幅，右菜单，中间，左菜单和页脚。如果我正在使用javascript将页面加载到像iframe那样的div中，那么名为middle的中间div会有一个内部称为内容的div。当我将页面加载到该div时，我需要高度自动调整到加载到其中的内容。我花了几个小时寻找并尝试解决问题的方法，但我还没有找到一个有效的答案。所以任何帮助都会很棒

主页编码

<html>
<head>
    <meta charset="utf-8"/>
    <title>Website Name</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    function load_page(page){
    document.getElementById("content").innerHTML='<object type="text/html" data="' + page + '" style="width:600px;" ></object>';
    }
    </script>
</head>
<body>
    <div class="container">
        <header></header>
        <div class="leftside">
            <div class="box">
                <h1>Menu</h1>
                <ul>
                    <li onclick="return load_page('php/home.php')">Home</li>
                </ul>
            </div>
        </div>
        <div class="middle" id="middle">
            <div id="content" class="content" >
            </div>
        </div>
        <div class="rightside">
        </div>
        <footer></footer>
    </div>

</body>

css编码

*{
margin:0px;
padding:0px;
list-style-type:none;
}
body {
 background-image: url("../img/bg/dark-forest.bmp");
 background-attachment: fixed;
 background-size:cover;
 font-family: "Verdana", Verdana, serif;
 color:#c3bdbd;
} 

.container{
width:1000px;
margin:10px auto; 
}

header{
Width:1000px;
height:200px;
background-color:purple;
display:block;
float:left;
}

.leftside{
width:200px;
min-height:1px;
display:block;
float:left;
margin-top:10px;
}

.middle{
width:600px;
height:auto;
display:block;
float:left;
margin-top:10px;
background-color:blue;
}

.content{
width:600px;
background-color:pink;
}

.rightside{
width:200px;
min-height:1px;
display:block;
float:right;
margin-top:10px;
}

footer{
width:1000px;
height:50px;
background-color:purple;
display:block;
float:left;
}

Answer 1

尝试使用以下标记而不是直接指定高度：

<span tabindex="-1"><a href="#">link</a></span>

指定该div的<html> <head> <style type="text/css"> .box-centerside { background:url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent; float:left; overflow: hidden; min-height:100px; width:260px; } </style> </head> <body> <div class="box-centerside"> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> This is sample content<br /> </div> </body> </html>

Answer 2

展示flex，我们最好的朋友

<div class="container">
    <header></header>
      <div class="middlezone">

    <div class="leftside">
        <div class="box">
            <h1>Menu</h1>
            <ul>
                <li onclick="return load_page('php/home.php')">Home</li>
            </ul>
        </div>
    </div>
    <div class="middle" id="middle">
        <div id="content" class="content" >
        </div>
    </div>
    <div class="rightside">
    </div>
      </div><!-- /middlezone -->
    <footer></footer>
</div>


*{
margin:0px;
padding:0px;
list-style-type:none;
}
body {
 background-image: url("../img/bg/dark-forest.bmp");
 background-attachment: fixed;
 background-size:cover;
 font-family: "Verdana", Verdana, serif;
 color:#c3bdbd;
} 

.container{
width:1000px;
margin:10px auto; 
display:flex;
flex-direction:column;
min-height:100vh;
}

header{
Width:1000px;
//height:200px;
flex:0 0 200px;
background-color:purple;
}

.middlezone {
    display:flex;
   flex:1 0 calc(100vh - (200px + 50px)) // container height minus header and footer height
}

.leftside{
//width:200px;
flex:0 0 200px;
min-height:calc(100vh - (200px + 50px));
}

.middle{
//width:600px;
flex:0 0 600px;
min-height:calc(100vh - (200px + 50px));
background-color:blue;
}

.content{
//width:600px;
flex:0 0 600px;
min-height:calc(100vh - (200px + 50px));
background-color:pink;
}

.rightside{
//width:200px;
flex:0 0 200px;
min-height:calc(100vh - (200px + 50px));
background-color:Ivory;
}

footer{
width:1000px;
//height:50px;
flex:0 0 50px;
background-color:Plum;
}

请务必通过以下方式运行flex： https://autoprefixer.github.io/

更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://jsfiddle.net/cmckay/ar8kL07z/

随意重新设置边距，我只是简化了示例的代码。

Answer 3

我希望你改变：

function load_page(page){
    $('#content').load(page);
}

由于你已经在使用jQuery，为什么不完全使用它的功能。

为主要内容添加容器：

<html>
<head>
    <meta charset="utf-8"/>
    <title>Website Name</title>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function load_page(page){
            // document.getElementById("content").innerHTML='<object         type="text/html" data="' + page + '" style="width:600px;" ></object>';
            $('#content').load(page);
        }
    </script>
</head>
<body>
    <div class="container">
       <header></header>
        <div class="main">
            <div class="leftside">
                <div class="box">
                    <h1>Menu</h1>
                    <ul>
                        <li onclick="return load_page('php/home.php')">Home</li>
                    </ul>
                </div>
            </div>
            <div class="middle" id="middle">
                <div id="content" class="content" >
                </div>
            </div>
            <div class="rightside">
            </div>
        </div>
        <footer></footer>
    </div>
</body>

并且还使用flexbox：

* {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
body {
    background-image: url("../img/bg/dark-forest.bmp");
    background-attachment: fixed;
    background-size: cover;
    font-family: "Verdana", Verdana, serif;
    color: #c3bdbd;
}
.container {
    width: 1000px;
    margin: 10px auto;
}
.main {
    display: flex;
}
header {
    Width: 1000px;
    height: 200px;
    background-color: purple;
    display: block;
}
.leftside {
    width: 200px;
    min-height: 1px;
    display: block;
    margin-top: 10px;
}
.middle {
    width: 600px;
    height: auto;
    display: block;
    margin-top: 10px;
    background-color: blue;
}
.content {
    width: 600px;
    background-color: pink;
}
.rightside {
    width: 200px;
    min-height: 1px;
    display: block;
    margin-top: 10px;
}
footer {
    width: 1000px;
    height: 50px;
    background-color: purple;
    display: block;
}

我希望这会有所帮助

div height自动调整到加载的页面内容

3 个答案: