HTML Quill WYSIWYG, wie Designe ich es richtig?
Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
-----------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0cm;
padding: 0cm;
font-size: 16px;
}
p {
font-size: 16px;
}
header{
margin: 0cm;
padding: 0cm;
width: 100%;
position: relative;
background-color: palevioletred;
}
footer{
margin: 0cm;
padding: 0cm;
width: 100%;
background-color: palevioletred;
}
#sidebar{
margin: 0cm;
padding: 0cm;
float: left;
min-height:100vh ;
overflow-x: hidden;
width: 150px;
background-color: aliceblue;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none; /* Firefox */
}
#sidebar::-webkit-scrollbar {
display: none;
}
#rechts{
margin: 0cm;
padding: 0cm;
width: 100%;
min-height: 100vh;
background-color: azure;
}
</style>
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
<header>a</header>
<div id="sidebar">
<p>Bereich1</p>
<p>Bereich2</p>
<p>Bereich3</p>
<p>Bereich4</p>
<p>Bereich5</p>
<p>Bereich6</p>
<p>Bereich7</p>
<p>Bereich8</p>
<p>Bereich9</p>
</div>
<div id="rechts">
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<div id="editor">
<p>Hello World!</p>
</div>
</div>
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
<footer>a</footer>
</body>
</html>
1 Antwort
Vom Fragesteller als hilfreich ausgezeichnet
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
der Bereich zum editieren springt immer nach unten,
Natürlich.
schuld daran ist ein Skript teil,
Nein. Schuld daran ist, dass die gesamte Bildschirmhöhe für den Container #rechts draufgeht. Korrigiere dein CSS wie folgt, dann erkennst du den Fehler.
Falsch:
#rechts{
margin: 0cm;
padding: 0cm;
width: 100%;
min-height: 100vh;
background-color: azure;
}
Richtig:
#rechts{
margin: 0cm;
padding: 0cm;
width: 50%;
min-height: 100vh;
background-color: azure;
float:left
}
Alex
das bedeutet dass ich bei der sidebar nicht eine absoluten Maßeinheit nehmen kann, oder was wird da normalerweise verwendet