展開頁面設置html和css

我正在構建一個新的博客，它在內容div中包含註釋部分。目前，我已經爲下面給出的正文，標題，導航，內容和頁腳設置了我的CSS。展開頁面設置html和css

內容div將根據正在撰寫的評論數量進行擴展。如何設置內容div的css/html，以便在更多的評論數量（例如： - 200）時頁面將自動展開。現在，我已經設置了寬度和高度爲100％

html, body { 
    height: 100%; 
    width: 100%; 

} 

#header { 
    background-color:red; 
    height:10%; 
    margin-bottom:1%; 
} 
#naigator { 
    background-color:red; 
    height:5%; 
    margin-bottom:1%; 
} 

#content { 
    background-color:red; 
    height:75%; 
    margin-bottom:1%; 
} 

#footer { 
    background-color:red; 
    height:10% 
}

來源

2014-12-11 user1050619

請提供你是什麼的圖像或視頻試圖實現。 – Zaqx 2014-12-11 04:29:58

不要在內容元素上定義高度，以便根據內容元素的內容自動展開。另外，如果你想要冗長，你可以設置'height：auto;'。 – Sgnl 2014-12-11 04:56:26

變化content的高度風格min-height：

function addContent() { 
 
    var content= document.getElementById('content'); 
 
    content.innerHTML = content.innerHTML+'testing &hellip; '; 
 
    if(content.innerHTML.length < 5000) { 
 
    setTimeout(addContent,10); 
 
    } 
 
}

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#header { 
 
    background-color:#fed; 
 
    height:9%; 
 
    margin-bottom:1%; 
 
} 
 

 
#navigator { 
 
    background-color:#def; 
 
    height:4%; 
 
    margin-bottom:1%; 
 
} 
 

 
#content { 
 
    background-color:yellow; 
 
    min-height:74%; 
 
    margin-bottom:1%; 
 
    font: 20pt verdana; 
 
} 
 

 
#footer { 
 
    background-color:#fed; 
 
    height:10%; 
 
}

<div id="header"> 
 
    <button onclick="addContent()">Add Content</button> 
 
</div> 
 
<div id="navigator"></div> 
 
<div id="content"></div> 
 
<div id="footer">Footer</div>

來源

2014-12-11 05:20:39

展開頁面設置html和css

回答

相關問題