Scrollbar schneidet die ganze Seite nach unten und rechts

Ich mache eine Webseite als Produkt für meine Präsentation in der Schule. Nun, das ist nicht das erste Mal, dass ich dieses Problem habe, aber meine Scrollbalken scheinen ein wenig von oben und von der Seite abgeschnitten zu sein. Darüber hinaus ist die Bildlaufleiste nur HALB sichtbar.Scrollbar schneidet die ganze Seite nach unten und rechts

(Beachten Sie, dass die schwarze Taskleiste in der Spitze sollte den ganzen Weg ausfüllen von links nach rechts und sollte direkt gegen die Spitze.)

<head> 

    <style type="text/css"> 

     html, body { 
      position: fixed; 
      width: 100%; 
      height: 100%; 
      background-color: #cccccc; 
      overflow-x: hidden; 
     } 

     ul { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
      background-color: #333; 
      position: relative; 
      left: -0.5%; 
      top: -8px; 
      width: 100.9%; 
     } 

     li { 
      float: left; 
     } 

     li a { 
      display: block; 
      color: white; 
      text-align: center; 
      padding: 20px 25px; 
      text-decoration: none; 
     } 

     li a:hover:not(.active) { 
      background-color: #111; 
     } 

     .active { 
      background-color: #111; 
     } 
     textarea { 
      resize: none; 
      position: fixed; 
      left: 35%; 
      top: 1%; 
      width: 30%; 
      font-size: 160%; 
      height: 35px; 
      padding: 3px; 
     } 
     p { 
      font-size:20px; 
      font-family: arial; 
      position: absolute; 
     } 

     .underline { 
      border-bottom: 0.5px solid black; 
      display: inline-block; 
      line-height: 0.85; 
     } 

    </style> 

    <script type="text/javascript"> 

     function clearContents(element) { 
     element.value = ''; 
    } 

    </script> 

</head> 

<body> 

    <ul> 
     <li><a class="active" href="home.html" style="font-family: arial;">Ready2Job</a></li> 
    </ul> 


    <img src="http://res.cloudinary.com/urbandictionary/image/upload/a_exif,c_fit,h_200,w_200/v1396913907/vtimxrajzbuard4hsj78.jpg" style="position: absolute; left: 400px; top: 50px; z-index: -1; width: 60%;"> <!-- Grey Box --> 

    <textarea placeholder="Search for jobs"></textarea> 

    <img src="Billeder\home_noprofilepic.jpg" style="position: fixed; width: 70px; height: 70px;"> 

    <p style="position: absolute; left: 80px; top: 41px;">Welcome, <i><span class="underline">Mikkel Mørkegaard</i></span><i>!</i></p> 

    <img src="Billeder\home_stars.jpg" style="position: fixed; width:180px; left: 50px; top: 75px;"> 

    <a href="home.html"><p style="position: fixed; font-size: 10px; left:5px; top:125px;">(Edit profile)</p></a> 


    <img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 80px;"> 

    <img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 1000px;"> 



</body>

Quelle

2017-02-07 Victor Lotz

Sie müssen wahrscheinlich nur den Rand in Ihrem Body-Tag zurücksetzen.

versuchen So verändert sich:

html, body { 
      position: fixed; 
      width: 100%; 
      height: 100%; 
      background-color: #cccccc; 
      overflow-x: hidden; 
     }

An:

html, body { 
      position: fixed; 
      width: 100%; 
      height: 100%; 
      background-color: #cccccc; 
      overflow-x: hidden; 
      margin: 0px; 
     }

Quelle

2017-02-07 20:02:01 Falle1234

Vielen Dank! Das war genau das, wonach ich suchte! :) –

Von der CSS, entfernen

html, body { 
    **overflow-x: hidden;** 
}

Der Überlauf-x Teil. Dies behebt die von Ihnen erwähnten Probleme. Lass es mich wissen, wenn das hilft.

Quelle

2017-02-07 20:02:44

Ich hatte ein Problem mit meiner Marge schien es. Danke für die Hilfe! :) –

Scrollbar schneidet die ganze Seite nach unten und rechts

Antwort

Verwandte Themen