div高度自动调整以适应其中的加载页面内容

Question

my problem is I have a website I'm working on it has a main wrapper div for all the content then I have a div for the banner, right menu, middle, left menu, and the footer. 我的问题是我有一个正在使用的网站，其中所有内容都有一个主包装div，然后我为横幅，右菜单，中间，左菜单和页脚有一个div。 the middle div named middle then has a div called content inside if it I'm using javascript to load pages into that div kinda like a iframe. 如果我正在使用javascript将网页加载到该div（有点像iframe）中，则名为Middle的Middle div则在内部具有一个称为content的div。 when I load a page into that div I need the height to auto adjust to the content that was loaded into it. 当我将页面加载到该div中时，我需要自动调整高度以适应加载到其中的内容。 I spent hours and hours looking and trying ways to fix my problem but I haven't found a answer that works yet. 我花了几个小时寻找和尝试解决问题的方法，但是还没有找到可行的答案。 so any help would be greatful 所以任何帮助都会很棒

the main page coding 主页编码

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

Try with the following mark-up instead of directly specifying height: 尝试使用以下标记，而不是直接指定高度：

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

Specify the min-height for that div 指定该div的min-height

Answer 2

Display flex, our new best friend Display 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;
}

Be sure to run flex through this: https://autoprefixer.github.io/ 确保通过以下方式运行flex： https : //autoprefixer.github.io/

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

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

Feel free to put margins back in, I just simplified the code for the example. 随意增加边距，我只是简化了示例代码。

Answer 3

I would prefer that you change: 我希望您更改：

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

Since you are already using jQuery anyways, why not fully use it's functions. 由于无论如何您已经在使用jQuery，为什么不充分使用它的功能。

Add a container for the main content: 添加主要内容的容器：

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

And also use flexbox: 还要使用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;
}

I hope this helps 我希望这有帮助

div高度自动调整以适应其中的加载页面内容

问题描述

3 个解决方案

解决方案1
0

解决方案2
0 2016-07-15 09:09:30

解决方案3
0 已采纳 2016-07-15 09:12:51

div高度自动调整以适应其中的加载页面内容

问题描述

3 个解决方案

解决方案1 0

解决方案2 0 2016-07-15 09:09:30

解决方案3 0 已采纳 2016-07-15 09:12:51

解决方案1
0

解决方案2
0 2016-07-15 09:09:30

解决方案3
0 已采纳 2016-07-15 09:12:51