1. 首頁
  2. 問答
  3. 無理由滾動5個像素點，如何修復？

無理由滾動5個像素點，如何修復？

2016-08-18 12 views
0

問題是，頁面沒有理由左右滾動？無理由滾動5個像素點，如何修復？

這裏是當前代碼 body margin和padding的codepen，因爲如果我刪除它會在頁腳和頁尾之間產生間隙;

codepen

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Temp Test</title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
</head> 

<body> 
    <div class="header"> 
    <div class="header-content"> 
     <h2>Notify</h2> 
     <p>A great new free psd theme to showcase your new application.</p> 
     <button><img src="http://i.imgur.com/zE3sKOv.png" alt="Windows"></button> 
     <button><img src="http://i.imgur.com/vR9AXQJ.png" alt="apple"></button> 
     <button><img src="http://i.imgur.com/caCQeE7.png" alt="Android"></button> 
    </div> 
    </div> 
    <div class="features"> 
    <div class="features-content_1"> 
     <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear"> 
     <h2>Editable Theme</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p> 
     </div> 
    </div> 
    <div class="features-content_1"> 
     <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear"> 
     <h2>Editable Theme</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p> 
     </div> 
    </div> 
    <div class="features-content_1"> 
     <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear"> 
     <h2>Editable Theme</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p> 
     </div> 
    </div> 
    </div> 
    <div class="get-notified"> 
    <div class="text"> 
     <h3>Get Notified Of Any Updates!</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id 
     sollicitudin ante lobortis at.</p> 
     <form> 
     <span class="email"><input type="email" placeholder="Email Adress" style=" text-align: center; 
    border: none; 
    border-radius: 8px; 
    width: 260px; 
    height: 31px; 
    float:left;" /></span> 
     </form> 
     <input type="submit" name="Notify" style="cursor:pointer;border:none;background-color: #2ecc71;margin-left: -20px;/* height: 50px; */border-left: 5px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;height: 33px;" /> 
    </div> 
    <div class="video-notified"> 
     <iframe width="600" height="300" src="https://www.youtube.com/embed/l9VFg44H2z8" frameborder="0" allowfullscreen style=" 
    float: right; 
    width: 400px; 
    height: 230px; 
    padding-top: 50px; 
    padding-right: 95px; 
"></iframe> 
    </div> 

    </div> 
    <div class="end"> 
    <div class="testi"> 
     <p>「Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu commodo nulla dapib us. Donec id sollicitudin urna. Integer at dui ac leo fermentum varius eleifend ut.」</p> 
     <h4>Jane Hunt</h4> 
    </div> 
    <div class="get-social"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1152%C3%9760&w=1152&h=60"> 
     <h3>Say Hi & Get in Touch</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</p> 

     <a href="https://twitter.com/@_black_me_" target="_blank"><img src="http://i.imgur.com/mgWJfui.png" alt="twitter"></a> 
     <a href="http://www.facebook.com/abdoo.sorcerer" target="_blank"><img src="http://i.imgur.com/G4YerKE.png" alt="facebook"></a> 
     <a href="#"><img src="http://i.imgur.com/8gpGXZD.png" alt="youtube"></a> 
     <a href="#"><img src="http://i.imgur.com/lADlqJt.png" alt="linked-in"></a> 

    </div> 
    </div> 

</body> 
<footer> 

</footer> 

</html>

來源

2016-08-18 Abdalrahman Gamal

+0

只需刪除負利潤率。 – pol

回答

1

使用以下代碼 只是刪除餘量：-8px;從任何地方，只需添加margin-top：-8px;在.header類

（這-8保證金創建在你的頁面額外加上了8px所以這就是爲什麼滾動條出現只是刪除它，並按照下面的代碼將罰款你）

<!DOCTYPE html><html class=''> 
    <head><script src='//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js'></script><script src='//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js'></script><script src='//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/Iwillsolo/pen/EyJaro" /> 


<style class="cp-pen-styles">@charset "utf-8"; 

/* CSS Document */ 

body { 
    margin:0; 
    padding:0; 
} 

.header { 
    background-image: url('http://i.imgur.com/5BABBRC.png'); 
    height: 500px; 
    margin-top: -8px; 
    border-top: 7px solid #2ecc71; 
    overflow: visible; 
} 

div button { 
    background-color: rgba(31, 12, 9, 0.32); 
    width: 56px; 
    height: 53px; 
    border: none; 
    border-radius: 100px; 
} 

div button:hover { 
    background-color: #797966; 
    cursor: pointer; 
} 

.header .header-content { 
    margin: auto; 
    text-align: center; 
    padding-top: 257px; 
    padding-right: 643px; 
} 

.header .header-content h2 { 
    padding-right: 300px; 
    color: #2ecc71; 
} 

.features { 
    width: 100%; 
    height: 295px; 

    margin-top: 8px; 
} 

.features .features-content_1 { 
    margin: auto; 
    padding-top: 60px; 
    margin-left: 80px; 
    text-align: center; 
    width: 400px; 
    float: left; 
} 

.features .features-content_1 img { 
    width: 60px; 
} 

.get-notified { 
    height: 355px; 

    background-color: #e3e3e3 
} 

.get-notified .text { 
    width: 401px; 
    text-align: justify; 
    margin-left: 100px; 
    padding-top: 25px; 
    float: left; 
} 

.get-notified .video-notified { 
    width: 642; 
    height: 377px; 
    float: right; 
} 

.end { 
    height: 400px; 

} 

.end .testi { 
    width: 800px; 
    position: relative; 
    left: 350px; 
    text-align: center; 
} 

.get-social { 
    text-align: center; 
} 

.get-social a { 
    padding-left: 10px; 
} 

footer { 
    background-color: #e3e3e3; 
    height:150px; 
}</style></head><body> 
<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Temp Test</title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> 
</head> 

<body> 
    <div class="header"> 
    <div class="header-content"> 
     <h2>Notify</h2> 
     <p>A great new free psd theme to showcase your new application.</p> 
     <button><img src="http://i.imgur.com/zE3sKOv.png" alt="Windows"></button> 
     <button><img src="http://i.imgur.com/vR9AXQJ.png" alt="apple"></button> 
     <button><img src="http://i.imgur.com/caCQeE7.png" alt="Android"></button> 
    </div> 
    </div> 
    <div class="features"> 
    <div class="features-content_1"> 
     <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear"> 
     <h2>Editable Theme</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p> 
     </div> 
    </div> 
    <div class="features-content_1"> 
     <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear"> 
     <h2>Editable Theme</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p> 
     </div> 
    </div> 
    <div class="features-content_1"> 
     <div><img src="http://i.imgur.com/hCRBOyI.png" alt="gear"> 
     <h2>Editable Theme</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla.</p> 
     </div> 
    </div> 
    </div> 
    <div class="get-notified"> 
    <div class="text"> 
     <h3>Get Notified Of Any Updates!</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id 
     sollicitudin ante lobortis at.</p> 
     <form> 
     <span class="email"><input type="email" placeholder="Email Adress" style=" text-align: center; 
    border: none; 
    border-radius: 8px; 
    width: 260px; 
    height: 31px; 
    float:left;" /></span> 
     </form> 
     <input type="submit" name="Notify" style="cursor:pointer;border:none;background-color: #2ecc71;margin-left: -20px;/* height: 50px; */border-left: 5px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;height: 33px;" /> 
    </div> 
    <div class="video-notified"> 
     <iframe width="600" height="300" src="https://www.youtube.com/embed/l9VFg44H2z8" frameborder="0" allowfullscreen style=" 
    float: right; 
    width: 400px; 
    height: 230px; 
    padding-top: 50px; 
    padding-right: 95px; 
"></iframe> 
    </div> 

    </div> 
    <div class="end"> 
    <div class="testi"> 
     <p>「Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu commodo nulla dapib us. Donec id sollicitudin urna. Integer at dui ac leo fermentum varius eleifend ut.」</p> 
     <h4>Jane Hunt</h4> 
    </div> 
    <div class="get-social"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1152%C3%9760&w=1152&h=60"> 
     <h3>Say Hi & Get in Touch</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</p> 

     <a href="https://twitter.com/@_black_me_" target="_blank"><img src="http://i.imgur.com/mgWJfui.png" alt="twitter"></a> 
     <a href="http://www.facebook.com/abdoo.sorcerer" target="_blank"><img src="http://i.imgur.com/G4YerKE.png" alt="facebook"></a> 
     <a href="#"><img src="http://i.imgur.com/8gpGXZD.png" alt="youtube"></a> 
     <a href="#"><img src="http://i.imgur.com/lADlqJt.png" alt="linked-in"></a> 

    </div> 
    </div> 

</body> 
<footer> 

</footer> 

</html> 

</body></html>

來源

2016-08-19 05:27:40 sms247

0

正如我在你的HTML和CSS已經找到。

.end .testi { 
    width: 800px; /* THIS 800 PX CREATES PROBLM. CONTENT GOES OUT AND SHOWS SCROLLBAR.*/ 
    position: relative; 
    left: 350px; 
    text-align: center; 
}

來源

2016-08-18 22:07:52

相關問題

 相關問題