HTML/CSS/Javascript Scrollbare div scrollt nicht?

Ich habe eine einfache Webseite mit einem Absatz und einem Textfeld in einem div. Wenn die beiden Elemente, die die div verlassen möchte ich den Benutzer in der Lage sein, um nach oben/untenHTML/CSS/Javascript Scrollbare div scrollt nicht?

Mein div auf auto Überlauf, aber wenn verlassen die Elemente der Seite der Benutzer nach wie vor nicht in der Lage ist zu blättern

Code:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel = "stylesheet" type = "text/css" href = "brdstyle.css" /> 
    <title>BrD</title> 
</head> 

<script src = "brdapp.js"></script> 

<body> 
<div id = "background"> 
    <div id = "console"> 
     <p id = "consoletext"></p> 
     <textarea rows = "1" id = "textinput" onkeydown = "checkInput();"></textarea> 
    </div> 
</div> 
</body> 
</html>

CSS

* { 
    margin: 0px; 
    padding: 0px; 
} 

body { 
    background-color: rgb(0, 0, 0); 
} 

#background { 
    position: fixed; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    margin: 0px; 
    padding: 0px; 
} 

#console { 
    margin: 0px; 
    padding: 0px; 
    overflow-y: auto; 
} 

#consoletext { 
    color: rgb(255, 255, 255); 
    font-family: Monospace; 
    margin: 10px 10px 0px 10px; 
    padding: 0px; 
    word-wrap: break-word; 
} 

#textinput { 
    resize: none; 
    border: none; 
    margin: 0px 10px 10px 10px; 
    padding: 0px; 
    outline: none; 
    background-color: rgb(0, 0, 0); 
    color: rgb(255, 255, 255); 
    font-family: Monospace; 
    width: calc(100% - 22px); 
    overflow: hidden; 
}

Javascript

function checkInput() { 
    var event = window.event || event.which; 

    if (event.keyCode == 13) { 
     event.preventDefault(); 
     addLine(document.getElementById("textinput").value); 
     document.getElementById("textinput").value = ""; 
    } 

    var newHeight = ((pageHeight - 20) - document.getElementById("consoletext").style.height); 
    if (document.getElementById("textinput").style.height != newHeight) { 
     document.getElementById("textinput").style.height = newHeight + "px"; 
    } 
} 

function addLine (line) { 
    var newText = document.createTextNode(line); 
    var newLineElement = document.createElement("br"); 
    document.getElementById("consoletext").appendChild(newText); 
    document.getElementById("consoletext").appendChild(newLineElement); 
}

Quelle

2016-07-09 Brady W

Der Auto-Wert Überlauf teilt den Browser automatisch "entscheiden", ob der Inhalt scrollbaren sein sollte oder nicht:

overflow-y: auto;

Wenn Sie einen div "scrollbar" müssen Sie dies Ihrem Browser in Ihrem CSS mitteilen:

overflow-y: scroll;

Edit: Wie hier in den Kommentaren dieser Antwort erwähnt ist Ihre Lösung:

CSS:

* { 
    margin: 0px; 
    padding: 0px; 
} 

body { 
    background-color: rgb(0, 0, 0); 
} 

#background { 
    position: fixed; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    margin: 0px; 
    padding: 0px; 
} 

#console { 
    margin: 0px; 
    padding: 0px; 
    height:100px; 
    overflow-y: scroll; 
} 

#consoletext { 
    color: white; 
    background-color:black; 
    font-family: Monospace; 
    margin: 10px 10px 0px 10px; 
    padding: 0px; 
    word-wrap: break-word; 
} 

#textinput { 
    resize: none; 
    border: none; 
    margin: 0px 10px 10px 10px; 
    padding: 0px; 
    outline: none; 
    background-color: black; 
    color: white; 
    font-family: Monospace; 
    width: calc(100% - 22px); 
    overflow: scroll; 

}

Quelle

2016-07-09 18:43:40

Ok die Scrollbar zeigt nun aber die Elemente gehen außerhalb des Bildschirms und die Scrollbar wird nie aktiv, Es ist, als ob der Browser denkt, dass nichts gescrollt werden muss, weil es nur ein paar Elemente gibt. –

Blick auf die Geige: https://jsfiddle.net/pdyegy5u/ ist, weil der Inhalt nicht scrollbar sein muss. Wenn das Eingabefeld scrollbar sein soll, müssen Sie 'overflow-y: scroll;' für Ihr Eingabeelement –

verlassen die Elemente in diesem Fall nicht das Div. Wenn Sie mir Ihren Inhalt zeigen, dass die Elemente das div verlassen dann könnte ich besser Ihr Problem verstehen –

HTML/CSS/Javascript Scrollbare div scrollt nicht?

Antwort

Verwandte Themen