проблемы с точным расчетом высот и полей - PullRequest
Новая
       36

проблемы с точным расчетом высот и полей

0 голосов
/ 07 мая 2020

привет. В настоящее время я работаю над веб-сайтом, где работаю с идеальными квадратами и ретанглами. Они должны идеально подходить для мобильных устройств и экранов ноутбуков, планшетов и т. Д. Поэтому я хочу именно сейчас и контролировать, сколько места занимает каждый элемент.

Моя проблема: речь идет о голубом цвете, эти div занимают 50% ширины и 100% высоты. Затем я устанавливаю фиолетовый div на высоту 60% с полем поверх 10% (то есть 70%), затем у меня есть geen div с высотой 30%, что доведет общую сумму до 100%. Как вы видите в примере, он берет не 100%, а больше.

Я красный, что маржа рассчитывается из родительского div (так что, я полагаю, голубой div), поэтому я мне нужно изменить свой образ мышления - расчет, я полагаю, но не сейчас, как. Кто-нибудь, кто может мне помочь? 

.toegelatenDagWeek {
	float: left;
	background-color: yellow;
}

.verhoudingTijd {
	float: right;
	background-color: red;

}

.extraTijdDagWeek {
	float: right;
	background-color: silver;
}


.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 50%;
}

.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
    margin: 1%;
}

.vierkanttt{
  width: 35%;
	float:left;
	text-align:center;
	margin-left: 37.5%;
	margin-right: 37.5%;
	margin-top: 1%;
	margin-bottom: 2%;
	position: relative;
	
}

.vierkanttt-marges {
	  flex: 1;
	  margin: 1px 1px 1px 1px;
	  position: relative;	  
}




.inputTimeSmall {
	background-color: #b721ff;
	border: none;
	border-radius: 0.5em;
	padding: 15% 0% 20% 0%;
	width:100%;
	text-align:center;
	font-size:0.8em;	
}

input {
    color: white;
}

.inputTimeSmall::placeholder { 
    color: white;
}

.inputTime:focus {
    outline: none;
}


.inputTime {
	background-color: #b721ff;
	border: none;
	border-radius: 0.5em;
	padding: 15% 0% 20% 0%;
	width:100%;
	text-align:center;
	font-size:4em;
	color: white;
	
}

.gespeeldeTijdTitel {
	color: white;
	width: 100%;
	padding-left: 5%;
	float: left;
	text-align: left;
	text-decoration-line: underline;
	//background: purple;
	font-size: 1.5em;
	padding-bottom: 3%;
	padding-top: 3%;
	background-color: blue;
}


.toegelatenTijdTitel {
  background: blue;
  height: 30%;
  width: 100%;
  position: relative;
}

.toegelatenTijdTitel div {
  position: absolute;
  top: 50%;
  color: white;
  text-decoration-line: underline;
  transform: translateY(-50%);
  margin-left: 5%;
  font-size: 1.5em;
}

.testje {
	width: 100%;
	height: 70%;
	background-color: black;	
}

.spaceInputTimeSmall {
	background-color: #21d4fd;
	border-radius: 0.5em;
	float:left;
	width: 50%;
	height: 100%;	
}

.inputTimeMini {
	width: 80%;
	background-color: #b721ff;
	font-size:2em;
	height: 60%;
	margin-top: 10%;
	margin-left: 10%;
	margin-right: 10%;	
	border-radius: 0.5em;
	display: table;	
}




.textBoxSmall {
	height: 30%;
	width: 80%;
	background-color: green;
	margin: 00% 10% 0% 10%;
	vertical-align: center;
	display: table;	
}

.centerText {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.boxtienprocent {
	background-color: grey;
}

#container {
  width: 90%;
  height: 90%;
  margin: 5%;
  position: relative;
  color: white;
}
<div class="square-box toegelatenDagWeek">
					<div class='square-content '>
						<div class="toegelatenTijdTitel">  
						  <div>
							toegelaten tijd
						  </div>					  
						</div>
						
						<div class="testje">
							
							<div class="spaceInputTimeSmall">
								<div class="boxtienprocent"></div>
								<!--<input type="text" class="inputTimeSmall" id="inputHoursMaandag" name="maandagUren" placeholder="00" maxlength="3">-->
								<div class="inputTimeMini" name="uren" id="DisplayToegelatenHours" ><div class="centerText">05</div></div>
								<div class="textBoxSmall"><div class="centerText">uren</div></div>
							</div>
							<div class="spaceInputTimeSmall">
								<!--<input type="text" class="inputTimeSmall" id="inputMinutesMaandag" name="maandagMinuten" placeholder="00" maxlength="2">-->
								<div class="inputTimeMini" name="uren" id="DisplayToegelatenMinutes" ><div class="centerText">05</div></div>
								<div class="textBoxSmall"><div class="centerText">minuten</div></div>
							</div>
						</div>	
					</div>	
				</div>

1 Ответ

0 голосов
/ 07 мая 2020

Вместо полей вам нужно использовать заполнение, потому что заполнение - это пространство между содержимым и границей, а поле - это пространство за пределами границы. В вашем примере вы использовали поля, поэтому он вытолкнул прямоугольник angular наружу.

...