DIV高度自动调整到加载页面内容中

我的问题是我有一个网站，我的工作就可以对所有内容的主包装的div然后我有旗帜，右键菜单，中间一个div，左边的菜单，和页脚。中间命名中间div然后有一个名为内容的div，如果我使用javascript将页面加载到该div中，就像iframe一样。当我加载一个页面到该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; 
}

来源

2016-07-15 Mark Teal

设置高度为％这里没有给出真正的100％的高度，它只能调整到真实高度的2/3左右，并且vh的大小取决于数量。 –

，我宁愿你改变：

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

我希望这有助于

来源

2016-07-15 09:12:51

这是非常接近div现在正在加载到其中加载页面的调整高度，但现在页面布局全部被破坏去看看我是否可以适应它，并感谢你如此远:) :) –

乐意帮忙。如果你想要最初的设计，你可以尝试去掉中产阶级的背景颜色。将.content文本颜色设置为黑色，并将.main的最小高度设置为150px。使用float和使用flex的原因是因为它更强大，并且操纵页面结构更容易。 –

事实上这确实解决了我的问题，我得到的布局问题对我来说运行的是旧版本的不支持flex的firefox浏览器，但在更改为浏览器后，它完美地工作，所以再次感谢 –

具有以下加价，而不是直接指定高度尝试：

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

指定min-height为DIV

来源

2016-07-15 08:57:03

没有变化没有工作，我在中间的div内容DIV，也是javascript函数 –

溢出尝试：隐藏;尝试将此也添加到该div，并将此属性添加到您的内容div。 – 2016-07-15 09:08:42

尝试出来是一样的只是没有任何h和v滚动条 –

显示器挠性，我们新的最好的朋友

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

一定要通过它来运行柔性： https://autoprefixer.github.io/

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

感觉免费把利润放回去，我简化了这个例子的代码。

来源

2016-07-15 09:09:30

页面设计的变化，但点击主页按钮后，页面加载到的尺寸与以前一样大小没有改变高度调整，所以它没有'吨工作 –

现在如何高度设置为最小高度和弯曲增长设置。 - 请参阅编辑（这里和jsfiddle） –

DIV高度自动调整到加载页面内容中

回答

相关问题