БЛОГ НА HUSL


Высота блока по размеру контента внутри

Автор вопроса: Дмитрий Хватов

Вот код :

#html {
  --MainColor: #465bfa; /* основной цвет  */
  --MainElemColor: #fcfcfc; /* цвет элементов */
  --TColor: #393939; /*Цвет текста*/
  --BackgroundColor: #f0f0f0; /*задний фон*/
  --Shadow: #898989; /*тень*/
  --ShadowMain: #e0e0e0; /*тень элементов*/
}

* {
  border: none;
  text-decoration: none;
  color: var(--TColor);
  font-size: 32px;
  font-family: Arial;
  font-weight: 200;
  word-wrap: break-word;
  margin: none;
  margin-top: 0;
  margin-left: 0;
  padding: none;
  top: 0;
  left: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*:focus { outline: none; }

body { background-color: var(--BackgroundColor); }

/******************************************header*/
header {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: var(--MainElemColor);
  box-shadow: 0px 4px 7px var(--Shadow);
  z-index: 2000;
}

.MenuButton {
  width: 50px;
  height: 50px;
  float: left;
  background-color: var(--MainElemColor);
  cursor: pointer;
}

.ElementMenuButton {
  width: 30px;
  height: 4px;
  position: relative;
  background-color: var(--MainColor);
  margin-left: 10px;
  margin-top: 5px;
  top: 9px;
}

header h1 {
  margin-top: 8px;
  margin-left: 90px;
  height: 0;
  width: 300px;
}

/******************************************nav*/
nav {
  position: fixed;
  width: 270px;
  height: 607px;
  top: 50px;
  border-right: 1px solid var(--BorderColor);
  background-color: var(--MainElemColor);
  box-shadow: 0 0 10px var(--ShadowMain);
  z-index: 1999;
  transition: transform 0.4s;
  transform: translateX(-100%);
}

.NavElement {
  width: 260px;
  height: 50px;
  position: relative;
  margin-top: 10px;
  cursor: pointer;
}

.NavElementBackground {
  width: 260px;
  height: 50px;
  float: left;
  opacity: 0;
  background-color: var(--MainColor);
  border-radius: 0px 25px 25px 0px;
}

.NavElement h3 {
  position: relative;
  top: -43px;
  left: 8px;
  width: 180px;
  height: 0;
}

.MainNavElement { color: var(--MainColor); }

.NavElementBackgroundOn { opacity: 0.2; }

.NavBoxBottomElem {
  width: 280px;
  height: 120px;
  position: absolute;
  top: auto;
  bottom: 0;
}

/************************************************main*/
main {
  width: 100%;
  height: 607px;
  position: fixed;
  overflow-y: scroll;
  top: 50px;
}

main section {
  width: 800px;
  height: auto;
  background-color: var(--MainElemColor);
  border-radius: 7px;
  border: 1px solid var(--BorderColor);
  box-shadow: 0 0 10px var(--ShadowMain);
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

main section h2 { font-size: 40px; }

main section .content {
  width: 47%;
  height: 100%;
  padding: 10px;
  float: left;
}

main section img { width: 50%; }

main section h3 { width: 100%; }

article {
  width: 100%;
  height: auto;
  position: fixed;
  border-radius: 20px 20px 0px 0px;
  background-color: var(--MainElemColor);
  box-shadow: 0px -4px 7px var(--Shadow);
  bottom: 0;
  top: auto;
  transition: transform 0.4;
  transform: translateY(110%);
}

article h2 {
  text-align: center;
  margin-top: 10px;
}

hr {
  background-color: var(--BorderColor);
  width: 96%;
  height: 1px;
  margin-left: 2%;
  margin-top: -10px;
}

article h3 { margin-left: 10px; }

article .MessageBoxOk {
  width: 150px;
  height: 50px;
  border-radius: 7px;
  background-color: var(--MainColor);
  position: relative;
  top: auto;
  bottom: 10px;
  left: 10px;
  margin-bottom: 10px;
}

article .MessageBoxOk h4 {
  text-align: center;
  position: relative;
  top: 9px;
}

.button {
  width: auto;
  height: 50px;
  border-radius: 7px;
  background-color: var(--MainColor);
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding-left: 20px;
  padding-right: 20px;
  transition: box-shadow 0.4s;
}

.button:hover { box-shadow: 0 0 10px var(--MainColor); }

.button h3 { transform: translateY(5px); }

/***********************************media*/
@media all and (max-width: 600px) {
  main section {
    border-radius: 0;
    max-width: 100%;
    border: 0;
  }
}
@media all and (max-width: 800px) {
  main section {
    width: 480px;
  }
}
@media all and (max-width: 1000px) {
  main section {
    width: 600px;
    height: auto;
    min-height: 200px;
  }
  main section img {
    display: none;
    width: 0;
  }
  main section .content {
    width: 100%;
    height: auto;
  }
}
<!doctype html>
<html id="html">
<!-- 1.0.0 -->

<head>
  <link rel="shortcut icon" href="icon/logo.png">
  <link rel="stylesheet" href="css/header.css">
  <meta charset="utf-8">
  <meta name="description" content="Web-Студия">
  <meta name="Keywords" content="  ">
  <!--<meta http-equiv="refresh" content="1; url=index.html">-->
  <meta name="viewport" content="width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta name="Author" content=" ">
  <meta name="Copyright" content=" ">
  <meta property="og:locate" content="ru_RU">
  <meta propetry="og:type" content="article">
  <meta propetry="og:title" content=" ">
  <meta propetry="og:image" content="icon\Desktop.jpg">
  <meta propetry="og:description" content="Web-Студия">
  <meta propetry="og:site_name" content=" ">
  <title>Title</title>
</head>

<body>
  <header id="header">
    <div class="MenuButton" onclick="CreateNavBar();">
      <div class="ElementMenuButton ElementMenuButton-1"></div>
      <div class="ElementMenuButton ElementMenuButton-2"></div>
      <div class="ElementMenuButton ElementMenuButton-3"></div>
    </div>
    <h1 id="h1Desktop"> UitD WebDesign </h1>
    <h1 id="h1Mobil" style="display:none;"> UitD Web </h1>
  </header>
  <nav id="nav">
    <div class="NavElement" onclick="CallForwarding('index.html');">
      <div class="NavElementBackground NavElementBackgroundOn"></div>
      <h3 class="MainNavElement"> Home </h3>
    </div>
    <div class="NavElement" onclick="CallForwarding('CSS/header.css');">
      <div class="NavElementBackground "></div>
      <h3> Work </h3>
    </div>
    <div class="NavElement" onclick="CallForwarding('CSS/header.css');">
      <div class="NavElementBackground"></div>
      <h3> News </h3>
    </div>
    <div class="NavElement" onclick="CallForwarding('CSS/header.css');">
      <div class="NavElementBackground"></div>
      <h3> Calculator </h3>
    </div>
    <div class="NavElement" onclick="CallForwarding('CSS/header.css');">
      <div class="NavElementBackground"></div>
      <h3> Message </h3>
    </div>
    <div class="NavElement" onclick="CallForwarding('CSS/header.css');">
      <div class="NavElementBackground"></div>
      <h3> Store </h3>
    </div>
    <div class="NavBoxBottomElem">
      <div class="NavElement NavElementBottom" onclick="NewTheme();">
        <div class="NavElementBackground"></div>
        <h3 id="h3Theme"> Dark Theme </h3>
      </div>
      <div class="NavElement NavElementBottom" onclick="CallForwarding('CSS/header.css');">
        <div class="NavElementBackground"></div>
        <h3> Conditions </h3>
      </div>
    </div>
  </nav>
  <main>
    <section>
      <div class="content">
        <h2>Title text</h2>
        <h3>Hello world</h3>
      </div>
      <img src="icon/_88272-1105.jpg">
    </section>
    <section>
      <div class="content">
        <h2>Title text</h2>
        <h3>Hello world hello wolrd hello world hello world hello world hellow rold</h3>
        <button class="button">
          <h3>hello world</h3>
        </button>
      </div>
      <img src="icon/_88272-1105.jpg">
    </section>
    <article id="MessageBox">
      <h2>title</h2>
      <hr>
      <h3>hello</h3>
      <div class="MessageBoxOk" onclick="NoneMessageBox();">
        <h4>OK</h4>
      </div>
    </article>
  </main>
  <script src="JS/script.js"></script>
</body>

</html>

Если запустить всё это в браузере и установить ширину окна меньше 1000px , то section перестаёт подстраиваться под контент внутри . Как это исправить и починить неправильно работающий section ?

PS. При вырывании из css кода строки min-height:200px; высота section становится равна 0


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.