[英]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.