百度首頁示例:
我給二維碼,和下面文本固定位置
這時html代碼
<div id="bar_code"> <div class="img_put"></div> <p>百度</p> </div> <div id="footer"> <p id="row_1"> <a href="#">百度設為主頁</a> <a href="#">關於百度</a> <a href="#">About Baidu</a> <a href="#">百度推廣</a> </p> <p id="row_2"> <s>©2018 Baidu</s> <a href="#">使用百度前必讀 </a> <a href="#"> 意見反饋</a> <s>京ICP證030173號</s> <i class="icon1"></i> <a href="#" class="j_g">京公網安備11000002000001號</a> <i class="icon2"></i> </p> </div>
css(分別給他們設置了position:absolute)但是沒有給他們的父級設置相對定位,這時他們以body為相對定位,沒有改變窗口的時候一切都好好的
#bar_code{ position: absolute; text-align: center; bottom: 140px; width: 100%; height: 60px; } .img_put{ display: inline-block; width: 60px; height: 60px; background: url(../image/barCode.png) no-repeat; background-size: 60px 60px; } #bar_code p{ color: #666; font-weight: 600; line-height: 23px; padding: auto auto; } #footer{ position: absolute; bottom: 47px; width: 100%; line-height: 22px; font-size: 12px; text-align: center; overflow: hidden; } #footer a{ display: inline-block; color: #999; text-decoration: underline; } #row_1 a{ margin-left: 25px; } #footer s{ color: #999; } .j_g{ margin-left: 25px; } #footer i{ display: inline-block; width: 14px; height: 17px; margin: 0 3px -3px 0; } .icon1{ background: url(../image/icons.png) -600px -96px; } .icon2{ background: url(../image/icons.png) -623px -96px; }
全部都皺成一團,那我們這時也可以給body設置一個最小高度和最小寬度避免出現這種情況,但是給body設置會造成很多不便的情況,比如我們又要往里面添東西,這時整個頁面顯得非常的限制
所以我們就給它的父級添上相對定位,和最小寬度,最小高度避免這種情況的出現
#content{ position: relative; width: 100%; text-align: center; min-width: 810px; height: 100%; min-height: 600px; }
頁面就會出現滾動軸,避免父級高度不夠出現剛才皺成一團的情況