Ich versuche, ein zentral geteiltes Layout mit Bootstrap zu erstellen. Die linke Seite des Bildschirms sollte fixiert sein und die rechte Seite des Bildschirms sollte scrollbar sein.zwei Bildlaufleisten auf zentral geteiltes Layout
Es funktioniert soweit gut, aber wenn ich das Layout auf kleinen Geräten testen, erhält der rechte Teil des Bildschirms zwei Bildlaufleisten. Wenn ich die Bildlaufleiste auf kleinen Geräten ausgeblendet habe, ist der Inhalt auf der rechten Seite nicht mehr scrollbar.
Die Änderung overflow:auto; zu overflow:visible; löst das Problem mit zwei Bildlaufleisten, aber die linke Seite des Bildschirms ist nicht mehr fixiert und scrollt mit der rechten Seite. position:fixed; löst das Problem nicht.
hier ist der Code:
.lw { font-size: 60px; }
body {
margin: 0;
}
#left {
background-color: yellow;
height: 100%;
overflow: hidden;
}
#right {
background-color: pink;
height: 100%;
overflow: auto;
text-align: center;
font-size: 8vw;
}
.container_left {
padding-top: 10%;
padding-bottom: 10%;
}
#question {
text-align: center;
font-size: 4vw;
padding-bottom: 50px;
}
#tip {
text-align: center;
}
@media screen and (max-width: 768px) {
#right{
overflow: hidden;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" id="left">
<div class="container_left">
<p id="question">Lorem ipsum dolor sit amet</p>
<p id="tip">tip</p>
</div>
</div>
<div class="col-lg-6" id="right">
<p style="color:red">start</p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<p style="color:red">end</p>
</div>
</div>
</div>
</body>
</html>Ich würde Ihren Rat zu schätzen wissen.
freundlichen Grüßen
Willkommen bei Stack Overflow! Fragen, die Code-Hilfe benötigen, müssen den kürzesten Code enthalten, der für die Reproduktion in der Frage erforderlich ist **, vorzugsweise in einem ** Stack Snippet **. Obwohl Sie einen Link bereitgestellt haben, würde Ihre Frage für andere zukünftige SO-Benutzer mit demselben Problem keinen Wert haben, wenn sie ungültig werden sollte. Siehe [** Etwas in meiner Website funktioniert nicht, kann ich nur einen Link einfügen **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project- doesnt-work-kann-ich-nur-einfügen-a-link-to-it). –