CSS에서 바닥글 위치 지정을 구현하는 방법(전체 코드)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 바닥글 위치 지정을 구현하는 방법(전체 코드)

Sep 11, 2018 pm 05:28 PM

css

이 글의 내용은 CSS(완전한 코드)에서 바닥글 위치 지정을 구현하는 방법에 대한 것입니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

CSS는 바닥글 위치 지정을 구현합니다

&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src=&quot;http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        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;        
             }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class=&quot;box&quot;&gt;
        &lt;button onclick=&quot;beLong()&quot;&gt;变长&lt;/button&gt;
        &lt;p class=&quot;content&quot; id=&quot;content&quot;&gt;内容&lt;/p&gt;
    &lt;/div&gt;
    &lt;footer&gt;footer&lt;/footer&gt;&lt;/body&gt;&lt;script&gt;
    function beLong() {
        document.getElementById(&#39;content&#39;).style.height = &#39;1000px&#39;;
    }&lt;/script&gt;
    &lt;/html&gt;

로그인 후 복사