Форум

pokk · #11 (**permalink**) 15.01.2018, 07:52

А подскажите как быть в случае увеличение масштаба, таблица внутри среднего блока выходит за границы его и из за этого, правый блок перепрыгивает вниз.

pokk · #12 (**permalink**) 16.01.2018, 10:33

А как сделать без min-height:calc(100% - 4em); в maintbl

.maintbl{
    border:1px solid grey;
    box-sizing:border-box;
    background:#e4e5e6;
    flex:1;
    min-height:calc(100% - 4em);
  }

Дело в том что дальше я добавил шапку и кучу горизонтальных линий(рамок) по 1-6px и из за этого страница вниз уезжает.

рони · #13 (**permalink**) 16.01.2018, 10:43

pokk,
делайте минимальный макет, так может быстрее кто-то подскажет ...

pokk · #14 (**permalink**) 16.01.2018, 11:18

Убрал Clear добавил шапку и потом вручную крутил
min-height:calc(100% - 6.7em); подбирал 6.7

PS: как сделать что бы была кнопка посмотреть?

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  html{
    height:100%;
    width:100%;
  }

  html *{
    margin:0;
    padding:0;
  }

  body{
    width:100%;
    height:100%;
    display:flex;
    flex-wrap:wrap;
  }

  .maintbl{
    border:1px solid grey;
    box-sizing:border-box;
    background:#e4e5e6;
    flex:1;
    min-height:calc(100% - 6.7em);
  }

  .BodyLeft{
    background:#008000;
    width:20%;
  }

  .BodyRight{
    background:#F00;
    width:20%;
  }

  
.bottom {
	padding-top:12px;
	height:2em;
	border-top: 1px solid white;	
	border-bottom: 6px solid #000;	
    width:100%;
    background:#e4e5e6;
	text-align:center;
}


  
.container{
	text-align:center;
}

header {
	background: #e4e5e6;
	border-top: 6px solid #000;
	border-bottom: 1px solid #BBBCBD;
	/* height:35px; */
	height:3em;
	width:100%;
}

.Border1{
	border-top: 1px solid white;
	border-bottom: 1px solid #BBBCBD;	
}  
  
  </style>
</head>

<header>
			<div class="container">
				<h1>Заголовок</h1>
			</div>
</header>

<body>

<div class="BodyLeft Border1">22222222</div>
<div class="maintbl Border1">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон</div>
<div class="BodyRight Border1">3333333333</div>
<div class="bottom">7609098098</div>
</body>
</html>

рони · #15 (**permalink**) 16.01.2018, 11:43

pokk,

[HTML  run][/HTML]

о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting

рони · #16 (**permalink**) 16.01.2018, 11:57

pokk,
строка 81 => 74

рони · #17 (**permalink**) 16.01.2018, 12:04

pokk,

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
  html, body{
    height:100%;
    width:100%;
  }

  html *{
    margin:0;
    padding:0;
  }

  .content{
    width:100%;
    min-height:calc(100% - 6.7em);
    display:flex;


  }

  .maintbl{
    border:1px solid grey;
    box-sizing:border-box;
    background:#e4e5e6;
    height:  auto;
    flex:1;

  }

  .BodyLeft{
    background:#008000;
    width:20%;
  }

  .BodyRight{
    background:#F00;
    width:20%;
  }


.bottom {
  padding-top:12px;
  height:2em;
  border-top: 1px solid white;
  border-bottom: 6px solid #000;
  width:100%;
  background:#e4e5e6;
  text-align:center;
}



.container{
  text-align:center;
}

header {
  background: #e4e5e6;
  border-top: 6px solid #000;
  border-bottom: 1px solid #BBBCBD;
  /* height:35px; */
  height:3em;
  width:100%;
}

.Border1{
  border-top: 1px solid white;
  border-bottom: 1px solid #BBBCBD;
}
td{
  height: 90px;
  border: 1px solid #0000CD
}

  </style>
</head>



<body>
<header>
      <div class="container">
        <h1>Заголовок</h1>
      </div>
</header>
<div class="content">
<div class="BodyLeft Border1">22222222</div>
<div class="maintbl Border1">Тут небольшой контент хочуть сделать в виде ленты вниз, а по бокам пустой фон<table style="width: 100%;  border-size: 1px; border-color: #CC0000; border-collapse: collapse">
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
  <tr>
    <td>table</td>
    <td>table</td>
    <td>table</td>
  </tr>
</table></div>
<div class="BodyRight Border1">3333333333</div>
</div>
<div class="bottom">7609098098</div>
</body>
</html>

pokk · #18 (**permalink**) 16.01.2018, 12:29

рони, так вот и каким образом тут
min-height:calc(100% - 6.7em); 6.7 получается ? и как его каждый раз не подпирать, мне надо что бы при открытии сайта не было прокрутки вниз

рони · #19 (**permalink**) 16.01.2018, 12:37

pokk,
ждите специалистов по css

Форум

Справочник

Discord чат

Курсы javascript