-1
Эй Я сейчас работаю на небольшом веб-сайте. К настоящему времени у меня есть заголовок, который уже работает нормально.контейнер div должен заполнить 100% веб-сайта
У меня только проблемы с моими div для содержания.
Я стараюсь, чтобы содержимое заполнило сайт на 100% по оси y. Для этого я использовал высоту: 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
Не совсем. Я хочу, чтобы заголовок был исправлен. # Main-content будет за заголовком и занимает высоту: 100% и # контент-статьи, чтобы заполнить # main-content – Miestiec