堆棧內存溢出
  簡體   English   中英

div高度自動調整以適應其中的加載頁面內容

[英]div height auto adjust to loaded page content within

 原文  2016-07-15 08:35:16  7   3    javascript/ jquery/ html/ css

問題描述

我的問題是我有一個正在使用的網站，其中所有內容都有一個主包裝div，然后我為橫幅，右菜單，中間，左菜單和頁腳有一個div。 如果我正在使用javascript將網頁加載到該div（有點像iframe）中，則名為Middle的Middle div則在內部具有一個稱為content的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;
}

3 個解決方案

解決方案1
 0  

嘗試使用以下標記，而不是直接指定高度： 

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

指定該div的min-height

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

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

確保通過以下方式運行flex： https : //autoprefixer.github.io/

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

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

隨意增加邊距，我只是簡化了示例代碼。

解決方案3
 0 已采納  2016-07-15 09:12:51

我希望您更改： 

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

我希望這有幫助

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 內容自動高度調整取決於頁面高度 加載了ajax內容的div的自動高度 調整div的高度到內容 在DIV中自動調整內容寬度 加載新內容時調整 iframe 的高度 iframe 隨着內容的變化自動調整高度 如何根據內容自動調整容器高度。 AJAX div內容無法自動調整頁面高度 如何使div調整包含內容的高度？ 100％高度div，但如果含量較大，請相應調整
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM