0
Ich versuche, eine Website mit einer Seitenleiste und einer rechten Seite für den Hauptinhalt zu erstellen. Obwohl ich zahlreiche Methoden ausprobiert habe, um es zum Laufen zu bringen, verhält es sich nicht so, wie ich es gerne hätte. Im Wesentlichen möchte ich beide scrollen, wenn sie über die volle Seite div überlaufen.Sidebar und Inhalt: Scroll-Probleme
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Glocal Impacts</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css">
<script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/bootstrap.js"></script>
<script type = "text/javascript" src = "js/matchHeight.js"></script>
<script type = "text/javascript" src = "js/app.js"></script>
</head>
<body>
<div class = "fullBG"
style = "background-image: linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url('pic/health.jpg');">
<div class = "homeSide">
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "about.html">About Glocal</a></li>
<li><a href = "team.html">Team</a></li>
<li><a href = "itinerary.html">Itinerary</a></li>
<li><a href = "service.html">Service Learning</a></li>
<li><a href = "trip.html">Upcoming Trips</a></li>
<li><a href = "alumni.html">Ask an Alumni</a></li>
<li><a href = "blog.html">Blog + Gallery</a></li>
<li><a href = "apply.html">Apply</a></li>
<li><a href = "contact.php">Contact</a></li>
<li><a href = "donate.html">Donate</a></li>
</ul>
</div>
<div class = "homeMain" style = "display: block">
<div class = "content">
<h1 id = "orphan">Touch an Orphan's Life</h1>
<p>A visit to an orphanage in Fez is an experience that our participants usually list as most memorable and one that has had the most impact on their lives. Students get to interact with mostly abandoned kids that range in age from few days to twelve years old. Participants have donated clothing and cash to help the day to day operation of the orphanage. Some of our students have even donated to the employees of the orphanage in a show of appreciation to their dedication and selflessness. Get your handkerchiefs ready, this has always been a good idea.</p>
<img class = "img-responsive" src = "pic/orphan.jpg">
<h1 id = "school">Maisa's School Supplies</h1>
<p>Students and their parents have come through in a major way when it came to donating school supplies. In fact, this project is named after the mother of one our alumni, Maisa, who has been examplary in this area and has procured countless school supplies. We encourage all participants and their families to follow suit and help us collect these supplies to bring on the trip and hand them directly to a group of needy and well deserving children.</p>
<img class = "img-responsive" src = "pic/school.jpg">
<h1 id = "clothes">Clothing Donations</h1>
<p>Lighten up the load in your overstuffed closet by getting rid of clothes that you have either outgrown or have no use for, and donate them to someone who needs them. Donating new, unworn or gently used clothing helps alleviate the pain of those who are in need and provides participants with an opportunity to affect change in a world plagued with sharp disparities. Pack an extra bag and get ready to donate its content directly to those who are to benefit from it. We have a close working relationship with an orphanage in the city of Fez. We will also make some impromptu stops as you travel through the Atlas Mountains to donate clothes.</p>
<img class = "img-responsive" src = "pic/clothes.jpg">
<h1 id = "soccer">Project Soccer Ball</h1>
<p>Soon after you touch down in Morocco, you will realize that the sport of soccer or football, as it’s known around the world, is not just a sport. Its reconciling powers overcome all. Students are encouraged to bring in a soccer ball to donate to local kids and witness how much love and peace can come from a single soccer ball. Students who are grooming themselves for a career in diplomacy and politics tend to benefit tremendously from this experience.</p>
<img class = "img-responsive" src = "pic/soccer.jpg">
</div>
<div class = "social"><ul>
<li><a href = "https://twitter.com/moroccoprogram" target = "_blank"><img src = "icon/twitter.png"></a></li>
<li><a href = "https://www.facebook.com/moroccoprogram" target = "_blank"><img src = "icon/facebook.png"></a></li>
<li><a href = "https://www.youtube.com/channel/UC_BIg1VK3aqpGKuFVT2UCFA" target = "_blank"><img src = "icon/youtube.png"></a></li>
</ul></div>
</div>
</div>
</body>
</html>
Wie Sie sehen können, gibt es drei Scrollbalken statt einer Scrollbar für die Sidebar und den Inhalt. Es ist seltsam, die rechte Seite scheint sogar die linke Seite zu übertreffen. Hier ist mein HTML und weniger. Irgendwelche Ideen?
(PS Bootstrap Gitterelemente funktionieren nicht wirklich im Inhaltsbereich entweder)
@import "variables.less";
@text: #303031;
@foot: #373737;
@line: #93999a;
@main: #435573;
@tabs: #222c3c;
@accent: #b52b2c;
@height: 590px;
@font-face
{
font-family: Montserrat;
src: url("../fonts/Montserrat.woff2");
}
@font-face
{
font-family: Selima;
src: url("../fonts/Selima.otf");
}
@font-face
{
font-family: Avenir;
src: url("../fonts/Avenir.woff");
}
@font-face
{
font-family: Proxima;
src: url("../fonts/Proxima.otf");
}
@font-face
{
font-family: Euclid;
src: url("../fonts/Euclid.otf");
}
@font-face
{
font-family: Besom;
src: url("../fonts/Besom.ttf");
}
html, body
{
width: 100%;
height: 100%;
margin: 0px auto;
padding: 0px;
}
.navbar
{
font-family: Euclid;
font-size: 14px;
letter-spacing: 3px;
text-decoration: none;
margin-bottom: 0px;
}
.content
{
text-align: left;
background-color: white;
padding: 80px;
h1
{
font-family: Avenir;
font-size: 35px;
line-height: 40px;
color: black;
text-transform: none;
text-decoration: none;
letter-spacing: 1px;
margin-bottom: 5px;
}
ul
{
margin-bottom: 30px;
}
p
{
font-family: Proxima;
font-size: 16px;
line-height: 32px;
color: black;
font-weight: normal;
letter-spacing: 2px;
margin: 20px 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
text-align: justify;
}
li
{
font-family: Proxima;
font-size: 16px;
color: @text;
font-weight: normal;
letter-spacing: 2px;
margin: 15px 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
img
{
width: 100%;
margin: 30px 0;
}
}
.fullBG
{
background-color: #efefef;
background-repeat: no-repeat;
background-size: center center;
background-position: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
.block
{
display: block;
padding: 75px 10px;
border: 2px solid white;
background: rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
font-family: Avenir;
letter-spacing: 3px;
font-size: 25px;
}
.homeMain
{
display: flex;
min-height: 590px;
flex-direction: column;
padding-left: 250px;
max-height: 100%;
overflow-y: scroll;
}
.middle
{
flex: 1;
}
.fancy
{
font-family: Selima;
font-size: 80px;
line-height: 85px;
color: white;
text-transform: none;
text-decoration: none;
letter-spacing: 2px;
margin: 0px auto;
padding-top: 20px;
text-align: center;
}
.homeSide
{
position: absolute;
width: 250px;
height: 100%;
padding: 30px 0px;
background: trasparent;
max-height: 100%;
overflow-y: scroll;
ul
{
list-style-type: none;
margin: 0px auto;
li
{
font-family: Euclid;
font-size: 14px;
letter-spacing: 3px;
padding: 15px 10px;
a
{
text-decoration: none;
color: white;
width: 0px;
padding-bottom: 5px !important;
border-bottom: 2px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
&:hover
{
border-bottom: 2px solid white;
width: 100%;
}
}
}
}
}
.footer
{
font-family: Euclid;
font-size: 14px;
letter-spacing: 3px;
background-color: @foot;
text-decoration: none;
padding: 20px;
text-align: center;
ul
{
list-style: none;
padding: 0px !important;
margin: 0px auto;
}
a
{
text-decoration: none;
color: white;
}
li
{
display: inline-block;
padding: 10px;
}
}
.social
{
font-family: Proxima;
font-size: 12px;
background-color: white;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
padding: 20px;
text-align: center;
width: 100%;
img
{
-webkit-filter: brightness(100%);
&:hover
{
-webkit-filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
}
ul
{
list-style: none;
padding: 0px !important;
margin: 0px auto;
}
a
{
text-decoration: none;
}
li
{
display: inline-block;
padding: 10px;
}
}
Ich habe diesen Mann tatsächlich versucht. Es gibt tatsächlich ein Problem tho. –
In einigen Höhen enthält der Körper den gesamten Inhalt. An anderen wird es tatsächlich abgeschnitten, wie zum Beispiel meine sozialen Symbole. –
Entfernen Sie die Mindesthöhe von '.homeMain' http://www.codeply.com/go/WEKeQJfWrP – ZimSystem