问题1

Question

目前，我正在使用单位：＆＃34; vw＆＃34;使我的文本框响应。

第一小提琴（无响应）：https://jsfiddle.net/jzhang172/w7yhd6xx/2/

＆＃13;

#second{
	height:635px;
  background:gray;

}
#second-try{
  height:635px;
}
.about-us-info {
	margin: 0 auto;
	width: 900px;
	height: 313px;
	border: 2px solid #3c3c3c;
	position: absolute;
	left: 50%;
	margin-left: -450px;
	top: 50%;
	margin-top: -160px;
}
span.span-header {
	text-align: center;
	display: block;
	/* margin-top: -22px; */
	position: relative;
	font-size: 34px;
	background: white;
	width: 420px;
	margin: 0 auto;
	margin-top: -21px;
	/* border: 1px solid black; */
	text-transform: uppercase;
	font-family: latobold;
	letter-spacing: .16em;
}

.about-us-info p {
	text-align: center;
	/* line-height: 28px; */
	line-height: 1.65em;

}
.about-us-info p.first {

	margin-top:50px;
}

＆＃13;

<div class="section" id="second">
		
		<div class="about-us-info">
			<span class="span-header">About Us</span>
			<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.   <br>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
			</p>
			<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br>
				Lorem ipsum dolor sit amet, consectetur.<br>
				Lorem ipsum dolor sit amet, consectetur. <br>
				Lorem ipsum dolor sit amet, consectetur.<br>
				Lorem ipsum dolor sit amet, consectetur.
			</p>
		</div>
	</div>

＆＃13;

第二小提琴（使用＆＃34; vw ＆＃34;尝试响应性）： https://jsfiddle.net/jzhang172/9Lagw1y6/1/

＆＃13;

.section{
  position:relative;
}

#second{
	min-height:635px;

}

.about-us-info {
    margin: 0 auto;
    width: 46.9vw;
    /* height: 16.3vw; */
    border: 2px solid #3c3c3c;
    position: absolute;
    left: 50%;
    margin-left: -23.4vw;
    top: 50%;
    margin-top: -160px;
}span.span-header {
    text-align: center;
    display: block;
    /* margin-top: -22px; */
    position: relative;
    font-size: 34px;
    background: white;
    width: 420px;
    width: 21.875vw;
    margin: 0 auto;
    margin-top: -21px;
    /* border: 1px solid black; */
    text-transform: uppercase;
    font-family: latobold;
    letter-spacing: .16em;
}

.about-us-info p {
	text-align: center;
	/* line-height: 28px; */
	line-height: 1.65em;

}
.about-us-info p.first {

	margin-top:50px;
}

/*----Third section--------*/

#third{
	min-height:488px;
  background:gray;
}

#services-info{

	margin-top:-125px;
	border:2px solid white;
	border-top:0px;
}
#services-header{
	background:transparent;
	color:white;

}
#services-paragraph{
	color:white;
}
#services-header:before, #services-header:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 2px solid white;
    top: 19px;
    width: 11.8vw;
}
#services-header:before {
    right: 100%;
    margin-right: .85vw;
}
#services-header:after {
	left: 100%;
	margin-left: .85vw;
}

＆＃13;

<div class="section" id="second">
		
		<div class="about-us-info">
			<span class="span-header">About Us</span>
			<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.   <br>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
			</p>
			<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br>
				Lorem ipsum dolor sit amet, consectetur.<br>
				Lorem ipsum dolor sit amet, consectetur. <br>
				Lorem ipsum dolor sit amet, consectetur.<br>
				Lorem ipsum dolor sit amet, consectetur.
			</p>
		</div>
	</div>
  
  
  	<div class="section" id="third">
		<div class="about-us-info" id="services-info">
			<span class="span-header" id="services-header">Services</span>
			<p class="first" id="services-paragraph">
				Lorem ipsum dolor sit amet, consectetur<br>
				Lorem ipsum dolor sit amet, consectetur.<br>
				Lorem ipsum dolor sit amet, consectetur<br>
				Lorem ipsum dolor sit amet, consectetur<br>
				Lorem ipsum dolor sit amet, consectetur.
			</p>
		</div>
	</div>

＆＃13;

以下是一些我想要纠正的错误，但不确定如何：
1.）大众在这里使用得当吗？有更好的解决方案吗？ 2.）我希望每个部分的高度根据内部的内容进行扩展，同时保持每个部分的最小高度（第一部分为635px，第二部分为488），因为现在重新调整浏览器大小时更小，内容重叠在其下面的任何内容。

使用此解决方案有什么问题吗？有更好的解决方案吗？

Answer 1

这是吗？如果没有，请告诉我。

body {margin: 0;}
.sections {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100vh;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.sections section {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.sections section>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    padding: 35px 50px;
    border:1px solid #333;
    margin: 50px 0;
    max-width: 50%;
    box-sizing: border-box;
    position: relative;
    min-width: 50%;
    -webkit-transition: min-width .3s ease-out;
    transition: min-width .3s ease-out;
}
#second {
  background-color: white;
  color: #333;
} 
#third >div {
  border-color: white;
}
#third {
  background-color: gray;
  color: white;
}
.span-header {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  background-color: white;
  padding: 0 1rem;
  font-size: 1.8em;
  text-transform: uppercase;
  text-align: center;
  -webkit-transition: font-size .3s ease-out;
    transition: font-size .3s ease-out;
    white-space: nowrap;
}
#third .span-header {
  background-color: gray;
}
@media (max-width: 767px) {
  .sections section>div{
    min-width: 60%;
  }
  .sections section>div {
    padding: 15px 30px;
  }
  .span-header {
    font-size: 1.25em;
  }
}
@media (max-width: 359px) {
  .sections section>div{
    min-width: calc(100vw - 120px);
  }
  .span-header {
    white-space: initial;
  }
}

<div class="sections">
  <section id="second">
    <div class="about-us-info">
      <span class="span-header">About Us</span>
      <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
        <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
      </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <br> Lorem ipsum dolor sit amet, consectetur.
        <br> Lorem ipsum dolor sit amet, consectetur.
        <br> Lorem ipsum dolor sit amet, consectetur.
        <br> Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </section>

  <section id="third">
    <div class="about-us-info" id="services-info">
      <span class="span-header" id="services-header">Services</span>
      <p class="first" id="services-paragraph">
        Lorem ipsum dolor sit amet, consectetur
        <br> Lorem ipsum dolor sit amet, consectetur.
        <br> Lorem ipsum dolor sit amet, consectetur
        <br> Lorem ipsum dolor sit amet, consectetur
        <br> Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </section>
</div>

请注意我也对html标记做了一些调整。干杯！

jsFiddle

Answer 2

问题1

以这种方式使用vw完全没问题。百分比宽度通常可以与vw执行相同的操作，但由于您有一些嵌套，因此您必须弄乱父级的宽度才能使百分比有效。（此用例为noted by Chris Coyier。）

我所谈论的嵌套是<div class="section"> s。由于<body元素上的边距尚未重置，因此这些部分（在某些浏览器上）最终比视口稍窄。要使用百分比，您必须这样做：

/* Reset margins */
body, html {
    margin: 0;
    padding: 0;
}

/* Now use percentages */
.about-us-info {
    width: 46.9%;
}

span.span-header {
    width: 47.4%;
}

注意vw在browser support方面存在更多问题（请查看已知问题标签）。

问题2

在给出的代码中，文本框使用position: absolute作为居中的一部分。绝对定位从文档流中取出元素，这就是部分不扩展以适应内容的原因。如果您希望它们正确展开，则需要使用different centering technique。

CSS表格居中（如上面的链接所示）可行：

<!-- First wrap your text boxes with containers... -->

<div class="section" id="second">
    <div class="container">
        <div class="about-us-info">
            <!-- ... -->
        </div>
    </div>
</div>

然后删除文本框中当前基于绝对的居中，并添加以下内容：

/* Make the parent a table: */
.section {
    display: table;
    width: 100%;
}

/* Make the container a table cell and center it: */
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

使用大众创建Div文本响应？

2 个答案:

问题1

问题2