이 글의 내용은 CSS(완전한 코드)에서 바닥글 위치 지정을 구현하는 방법에 대한 것입니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.
CSS는 바닥글 위치 지정을 구현합니다
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } *{ margin: 0; padding: 0; } .box{ width: 100%; min-height: 100%; padding-bottom: 50px; box-sizing: border-box; background: #e4e4e4; } .content{ background: #fff; border-bottom: 1px solid #999; } button{ margin: 10px auto; line-height: 30px; width: 20%; } footer{ height: 50px; line-height: 50px; text-align: center; margin-top: -50px; background: #fff; } </style> </head> <body> <div class="box"> <button onclick="beLong()">变长</button> <p class="content" id="content">内容</p> </div> <footer>footer</footer></body><script> function beLong() { document.getElementById('content').style.height = '1000px'; }</script> </html>
관련 권장 사항:
CSS에서 Sprite를 통해 절단 기술을 구현하는 방법(코드 포함)
위 내용은 CSS에서 바닥글 위치 지정을 구현하는 방법(전체 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!