Положение: полное перекрытие с широким окном просмотра - PullRequest
Новая
       4

Положение: полное перекрытие с широким окном просмотра

0 голосов
/ 06 марта 2020

У меня слегка повернутый div, создающий асимметричный график c на моей стартовой странице. Я использую overflow: hidden, чтобы скрыть наложение от этого div. Все использует абсолютное позиционирование, чтобы получить элементы именно там, где я хочу их, и vw и vh, чтобы сделать его отзывчивым. Он выглядит великолепно, когда соотношение сторон «нормальное», но когда окно приближается к соотношению сторон 2 или 3: 1 (как у сверхширокого монитора), все перекрывается. Узкое соотношение сторон не является проблемой, так как я переключаю его на мобильное представление, прежде чем оно становится проблемой.

Я подумал об использовании overflow: auto, чтобы его не принудительно поместили в окне просмотра, но тогда возможно см. края повернутого div.

Есть ли решение для этого или это, возможно, плохая практика и должно быть сделано по-другому? 

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

#body {
	overflow: hidden;
	background: red; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
}


.shape {
	position: absolute;
	right: -10%;
	top: -50%;
	height: 200%;
	width: 45%;
	transform: rotate(350deg);
	background: white;
}

#welcome {
	position: absolute;
	color: black;
	z-index: 999;
	margin-left: 65vw;
  margin-top: 10vh;
}

#welcome h1 {
	margin-bottom: 0;
  font-size: 7vw;
}

#welcome p {
	font-size: 4vw;
	margin-top: 0;
}

#startbtn {
	position: absolute;
	font-size: 3vw;
	padding: 4vh 5.5vw 4vh 5.5vw;
	background: blue;
	color: white;
	border: none;
	margin-left: 65vw;
	margin-top: 70vh;
}
<body id="body">
	<div class="shape"></div>

    <div class="wrapper">
      <div id="welcome" autofocus>
        <h1>Welcome</h1>
        <p>More Text Here</p>
      </div>
    </div>

    <div class="wrapper">
      <input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
    </div>
</body>
</html>

Спасибо!

1 Ответ

1 голос
/ 06 марта 2020

Добро пожаловать в Stackoverflow. Поместив форму в тот же контейнер (я использовал первую обертку), как ваш контент должен решить проблему. Почему это так: потому что белая форма должна соответствовать вашему контенту. Кроме того, я поместил кнопку в тот же контейнер.

И вам не нужны размеры фона для вашего тела, поскольку он просто красный.

Возможно, я испортил ваши исходные размеры, но это должно сработать. 

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  overflow: hidden;
  background: red;
}

.wrapper {
  position: relative;
  height: 100%;
}

.shape {
  position: absolute;
  margin-top: -50%;
  margin-right: -50%;
  right: 0;
  height: 300%;
  width: 100%;
  transform: rotate(350deg);
  background: white;
}

#welcome {
  position: absolute;
  color: black;
  z-index: 999;
  margin-left: 65vw;
  margin-top: 10vh;
}

#welcome h1 {
  margin-bottom: 0;
  font-size: 7vw;
}

#welcome p {
  font-size: 4vw;
  margin-top: 0;
}

#startbtn {
  position: absolute;
  font-size: 3vw;
  padding: 4vh 5.5vw 4vh 5.5vw;
  background: blue;
  color: white;
  border: none;
  margin-left: 65vw;
  margin-top: 70vh;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#body {
  overflow: hidden;
  background: red;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.wrapper {
  position: relative;
  height: 100%;
}

.shape {
  position: absolute;
  margin-top: -50%;
  margin-right: -50%;
  right: 0;
  height: 300%;
  width: 100%;
  transform: rotate(350deg);
  background: white;
}

#welcome {
  position: absolute;
  color: black;
  z-index: 999;
  margin-left: 65vw;
  margin-top: 10vh;
}

#welcome h1 {
  margin-bottom: 0;
  font-size: 7vw;
}

#welcome p {
  font-size: 4vw;
  margin-top: 0;
}

#startbtn {
  position: absolute;
  font-size: 3vw;
  padding: 4vh 5.5vw 4vh 5.5vw;
  background: blue;
  color: white;
  border: none;
  margin-left: 65vw;
  margin-top: 70vh;
}
<div class="wrapper">
  <div class="shape"></div>
  <div id="welcome" autofocus>
    <h1>Welcome</h1>
    <p>More Text Here</p>
  </div>
  <input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>
...