[英]Expand DIV vertically by keeping the footer at the same position when open/hide element
我有一個div，通過單擊一個按鈕來顯示/隱藏，如下圖所示。 在這里，當按下按鈕時，我希望按鈕位於相同位置，並展開其上方的div（內容）（朝頂部-位置1而不是底部-位置2）。 我嘗試了以下position:absolute; 屬性，但沒有任何變化。 任何想法？
這是僅用於指示此布局的示例html：
<body>
<div class="content">
//Content...
</div>
<div id=hidden>
//Hiddent area...
</div>
<input type="button">
<footer>
//Footer...
</footer>
</body>
更新：
這是第二個示例的第二個行為：我希望代碼按說明工作。
看起來您可能需要position: fixed; 而不是position: absolute; 。 這樣行嗎？
$(function () { $(".expcol").hide(); $("#btnCM").click(function () { $(".expcol").slideToggle(); }); });
/* Start Praveen's Reset for Fiddle ;) */ * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* End Praveen's Reset for Fiddle ;) */ footer {position: fixed; bottom: 0; width: 100%; background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <footer> <button id="btnCM">Click Me</button> <div class="expcol"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione commodi, tenetur laborum et beatae praesentium animi, repellat cum pariatur nostrum harum hic excepturi cumque, magnam illo neque quam molestias nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores sunt sed nemo dignissimos enim tempora quam recusandae cum debitis provident eaque dicta illum, voluptatum expedita rerum vel cupiditate deleniti.</p> </div> </footer>
或者，如果按鈕在底部：
$(function () { $(".expcol").hide(); $("#btnCM").click(function () { $(".expcol").slideToggle(); }); });
/* Start Praveen's Reset for Fiddle ;) */ * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* End Praveen's Reset for Fiddle ;) */ footer {position: fixed; bottom: 0; width: 100%; background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <footer> <div class="expcol"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione commodi, tenetur laborum et beatae praesentium animi, repellat cum pariatur nostrum harum hic excepturi cumque, magnam illo neque quam molestias nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores sunt sed nemo dignissimos enim tempora quam recusandae cum debitis provident eaque dicta illum, voluptatum expedita rerum vel cupiditate deleniti.</p> </div> <button id="btnCM">Click Me</button> </footer>
CSS：將div元素垂直和水平放置在中間，將頁腳放置在底部
[英]CSS: position a div element vertically and horizontally in the center, position footer at the bottom
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.