-1
私は現在少しのウェブサイトで作業しています。今私はすでにうまく動作しているヘッダーがあります。divコンテナはウェブサイトの100％を埋める必要があります
私はコンテンツのdivに問題があります。
コンテンツをY軸上に100％埋めるようにしています。 これは私が使用した高さ：100％;
残念ながら、divにはテキストがさらに含まれているとすべてが塗りつぶされず、下にスクロールできます。
divを拡張する方法を知っていますか？
私はより良い質問をフォーマットすることができました。問題は説明するのが難しいです。
@charset "utf-8";
html{
\t width: 100%;
\t height: 100%;
\t margin: 0;
\t padding: 0;
}
body {
\t background: #F2F2F2;
\t width: 100%;
\t height: 100%;
\t margin: 0;
\t padding: 0;
\t font-family: expresswayregular;
}
@font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
\t position: fixed;
\t background: #333333;
\t width: 100%;
\t height: 50px;
\t padding: 0;
\t margin: 0;
\t top: 0;
}
#header-content {
\t background: #333333;
\t width: 1280px;
\t height: 50px;
\t margin-left: auto;
\t margin-right: auto;
}
#logo {
\t position: absolute;
}
#profile {
\t position: absolute;
\t margin-left: 100px;
}
#profile-icon {
\t position: absolute;
\t top: 7.5px;
\t left: 0;
}
#profilename {
\t position: absolute;
\t top: 0;
\t width: 110px;
\t height: 20px;
\t margin-left: 36px;
\t padding: 15px 15px 15px 15px;
\t color: #F2F2F2;
\t text-decoration: none;
\t font-size: 14px;
}
#profilename:hover {
\t cursor: pointer;
\t color: #2997D3;
\t transition: all 300ms;
}
#button-profile {
\t width: 100px;
\t height: 20px;
}
#sections_panel{
\t position: absolute;
\t background: #333333;
\t height: 0px;
\t width: 140px;
\t top: 50px;
\t left: 50px;
\t border-radius: 0px 0px 8px 8px;
\t overflow: hidden;
\t z-index: 1000;
\t transition: height 0.3s linear 0s;
}
#sections_panel div{
\t background:#333;
\t padding: 6px;
\t height: 238px;
\t margin: 10px;
\t color: #FC0;
}
#search-box {
\t position: absolute;
\t background: #333333;
\t margin-left: 250px;
}
#search {
\t position: absolute;
\t background: #fff;
\t width: 412px;
\t height: 16px;
\t margin-top: 10px;
\t margin-bottom: 10px;
\t margin-left: 50px;
\t padding: 6px;
\t border: 1px solid #fff;
\t border-radius: 6px 0 0 6px; \t
}
#submit {
\t position: absolute;
\t background: #fff;
\t width: 28px;
\t height: 28px;
\t margin-top: 10px;
\t margin-bottom: 10px;
\t margin-left: 476px;
\t padding: 0;
\t border-top: 1px solid #fff;
\t border-right: 1px solid #fff;
\t border-bottom: 1px solid #fff;
\t border-radius: 0 6px 6px 0; \t
}
#menu {
\t margin-right: 50px;
\t margin-left: 25px;
}
.menu-linkbox *{
\t position: static;
\t float: right;
\t width: auto;
\t height: 14px;
\t top: 0;
\t padding: 18px 15px 18px 15px;
\t color: #F2F2F2;
\t font-size: 14px;
\t text-decoration: none;
\t text-align: center;
}
.menu-linkbox:hover a {
\t color: #2997D3;
\t transition: all 500ms;
}
#main-content {
\t background: #fff;
\t width: 1280px;
\t height: 100%;
\t margin-right: auto;
\t margin-left: auto;
\t padding-top: 50px;
\t display: block;
}
#content-articles {
\t background: #F2F2F2;
\t width: 1220px;
\t height: 100%;
\t bottom: 0;
\t margin: 20px;
\t padding: 10px;
\t border: 1px solid #000;
\t overflow: visible;
}
#article1 {
\t width: 40%;
\t float: left;
\t margin: 20px;
\t text-align: justify;
\t word-spacing: 4px;
}
#article2 {
\t width: 40%;
\t float: right;
\t margin: 20px;
\t text-align: justify;
\t word-spacing: 4px;
}
#article3 {
\t width: 40%;
\t float: left;
\t margin: 20px;
\t text-align: justify;
\t word-spacing: 4px;
}
#article4 {
\t width: 40%;
\t float: right;
\t margin: 20px;
\t text-align: justify;
\t word-spacing: 4px;
}
#player {
\t background: #333333;
\t position : fixed;
\t bottom: 0;
\t width: 100%;
\t height: 50px;
}
#player-content {
\t background: #333333;
\t width: auto;
\t height: 50px;
\t margin-left: 200px;
\t margin-right: 200px;
\t font-size: 25px;
\t
}
h1 {
\t color: #2997D3;
\t font-size: 20px;
\t text-align: center;
\t margin-bottom: 20px; \t
}
p {
\t margin: 20px;
\t
\t
}<!doctype html>
<html>
\t <head>
\t
\t \t <meta charset="utf-8">
\t \t
\t \t <link rel="stylesheet" type="text/css" href="stylesheet.css">
\t \t
\t \t <title>SleekPlayer</title>
\t \t
\t \t <script>
\t \t \t function toggleNavPanel(x){
\t \t \t \t var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
\t \t \t \t if(panel.style.height == maxH){
\t \t \t \t \t panel.style.height = "0px";
\t \t \t \t \t navarrow.innerHTML = "▾";
\t \t \t \t }
\t \t \t
\t \t \t \t else {
\t \t \t \t \t panel.style.height = maxH;
\t \t \t \t \t navarrow.innerHTML = "▴";
\t \t \t \t }
\t \t \t }
\t \t </script>
\t
\t </head>
\t
\t <body>
\t
\t \t <div id="header">
\t \t
\t \t \t <div id="header-content">
\t \t
\t \t \t \t <img id ="logo" src="images/logo.png" />
\t \t \t \t
\t \t \t \t <div id="profile">
\t \t \t \t \t <img id ="profile-icon" src="images/profile-icon.png" />
\t \t \t \t
\t \t \t \t \t <div id="profilename" onclick="toggleNavPanel('sections_panel')">
\t \t \t \t
\t \t \t \t \t \t <div id="button-profile"> Profilename <span id="navarrow">▾</span></div>
\t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t <div id="sections_panel">
\t \t \t \t \t \t
\t \t \t \t \t \t <div>
\t \t \t \t \t \t \t
\t \t \t \t \t \t </div>
\t \t \t \t \t \t
\t \t \t \t \t </div>
\t \t \t \t
\t \t \t \t </div>
\t \t \t
\t \t \t \t <div id="search-box">
\t \t \t
\t \t \t \t \t <form action="http://www.google.com/search" method="get">
\t \t \t
\t \t \t \t \t \t <input id="search" type="text" name="q" placeholder="Suche">
\t \t \t
\t \t \t \t \t \t <input id="submit" type="image" src="images/search.png" alt="Submit">
\t \t
\t \t \t \t \t </form>
\t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="menu"> \t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t <div class="menu-linkbox"><a href="https://www.youtube.com/">Aktuelles</a></div>
\t \t \t \t \t \t
\t \t \t \t \t <div class="menu-linkbox"><a href="https://google.de/">Neues</a></div>
\t \t \t \t \t <div class="menu-linkbox"><a href="https://facebook.com/">Interessantes</a></div>
\t \t \t \t \t <div class="menu-linkbox"><a href="https://twitter.com/">Allgemeines</a></div>
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t
\t \t \t </div>
\t \t \t
\t \t </div>
\t \t
\t \t <div id="main-content">
\t \t
\t \t \t <div id="content-articles">
\t \t \t
\t \t \t \t <div id="article1"> \t
\t \t \t \t \t
\t \t \t \t \t <h1>Assignment</h1>
\t \t \t
\t \t \t \t \t <p>
\t \t \t
\t \t \t \t \t Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.
\t \t \t \t \t Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.
\t \t \t \t \t Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.
\t \t \t \t \t Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.
\t \t \t \t \t Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
\t \t \t
\t \t \t \t \t </p>
\t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="article2"> \t
\t \t \t \t \t
\t \t \t \t \t <h1>Assignment</h1>
\t \t \t
\t \t \t \t \t <p>
\t \t \t
\t \t \t \t \t Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.
\t \t \t \t \t Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.
\t \t \t \t \t Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.
\t \t \t \t \t Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.
\t \t \t \t \t Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
\t \t \t
\t \t \t \t \t </p>
\t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="article3"> \t
\t \t \t \t \t
\t \t \t \t \t <h1>Assignment</h1>
\t \t \t
\t \t \t \t \t <p>
\t \t \t \t \t
\t \t \t \t \t Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.
\t \t \t \t \t Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.
\t \t \t \t \t Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.
\t \t \t \t \t Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.
\t \t \t \t \t Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
\t \t \t
\t \t \t \t \t </p>
\t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div id="article4"> \t
\t \t \t \t \t
\t \t \t \t \t <h1>Assignment</h1>
\t \t \t
\t \t \t \t \t <p>
\t \t \t
\t \t \t \t \t Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.
\t \t \t \t \t Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.
\t \t \t \t \t Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.
\t \t \t \t \t Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.
\t \t \t \t \t Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
\t \t \t
\t \t \t \t \t </p>
\t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t
\t \t \t </div>
\t \t
\t \t </div>
\t \t
\t <!--
\t \t <div id="player">
\t \t \t
\t \t \t <div id="player-content">
\t \t \t
\t \t \t
\t \t \t
\t \t \t </div> \t
\t \t </div>
\t -->
\t
\t </body>
</html>
を見てみてください。あなたは '＃main-content'と'＃content-article'がブラウザの全高から 'header'を引いたものを使い、'＃main-content'の中でコンテンツをスクロールさせたいとしますブラウザウィンドウ全体がスクロールしますか？ – Jesse
私はヘッダーを修正したい。ヘッダーの背後にあり、高さ：100％を取る＃メインコンテンツと＃メインコンテンツを埋め込む＃content-articles – Miestiec