个人中心
gpt4 book ai didi

html - 如何制作全出血布局(分为两半)

转载 作者：行者123 更新时间：2023-11-28 06:20:33 26 4
gpt4 key购买 nike

我试图将页面分成两部分。基于其中任何一个，其他部分的高度应该展开和折叠。

我尝试制作此布局，但无法预测其中的问题所在。这是 fiddle 的链接。

我不想在容器上应用一些最小高度，因为内容可以增加或减少，如果我不使用最小高度，整个内容就会隐藏在页眉和页脚之间。

https://jsfiddle.net/j4vcLbaL/1/

HTML

    <header>I am Header</header>
<body>
  <div id="content">
    <div class="page-wrapper">

    <div class="left-col">
      <div class="section">
        <div class="icons">
          <ul>
            <li class="fa fa-cloud">1</li>
            <li class="fa fa-cloud">2</li>
            <li class="fa fa-cloud">3</li>
            <li class="fa fa-cloud">4</li>
          </ul>
        </div>
        <div class="text">
            ____Left Column----
            Lorem Ipsum is simply dummy text of the printing and typesetting                 industry. Lorem Ipsum has been the industry's standard dummy text               ever since the 1500s, when an unknown printer took a galley of type             and scrambled it to make a type specimen book. It has survived not               only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        </div>

      </div>
    </div>
    <div class="right-col">

      <div class="content">
        Lorem Ipsum is simply dummy text of the printing and typesetting                 industry. Lorem Ipsum has been the industry's standard dummy text               ever since the 1500s, when an unknown printer took a galley of type             and scrambled it to make a type specimen book. It has survived not               only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting                 industry. Lorem Ipsum has been the industry's standard dummy text               ever since the 1500s, when an unknown printer took a galley of type             and scrambled it to make a type specimen book. It has survived not               only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      </div>
    </div>
    </div>
  </div>
</body>

<footer>
  I am Footer
</footer>

CSS

  .page-wrapper{
  position:relative;
  min-height:100px;
}

#content{
  margin: 0 auto;
    padding: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    clear: both;
  }

.left-col{
    background: #ccc;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 40%;
}
.section {
  clear:both;
  padding-right:10px;
}
.icons{
  position: absolute;
    height: 100%;
    width: 64px;
    z-index: 1;
        background: #999;
}

.text{
  position: relative;
      width: 100%;
    padding-left: 64px;
}

.right-col{
    background: #fff;
    color:#000;
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    height: 100%;
    width: 60%;
    padding-left:10px;
}

最佳答案

这是一个更新后的布局，您可以测试列的内容和列的高度是否相等。

我认为这段代码会对您有所帮助!

/* ================================================================= */
/* Partial Section 						                             */
/* ================================================================= */

.partial_section {
    position: relative;
    background-color: #2196F3;
}
.partial_section::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}
.partial_section::after {
    background: #000d21;
}
.partial_section::after {
    right: 0;
}
.content_wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
    z-index: 2;
}
.ps_column {
    display: table-cell;
    vertical-align: top;
}
.section_half.ps_column {
    width: 48%;
}
.ps-title {
    position: relative;
    margin: 20px;
}
.ps-title h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}
.ps-content-wrap {
    padding: 40px;
}
.ps-content {
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}
header {
    background-color: #4CAF50;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}
footer {
    background-color: #E91E63;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css' type='text/css' media='all' />
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<!-- Partial Section Wrapper -->
	<header>
		<div class="ps-title">
			<h3>Header section</h3>
		</div>
	</header>
	<div class="partial_section section-border-bottom">
		<!-- Section content -->
		<div class="content_wrapper">
			<!-- Section Column -->
			<div class="section_half ps_column">
				<div class="ps-content-wrap" style="color: #ffffff;">
					<div class="ps-title">
						<h3>COLUMN LEFT</h3>
					</div>
					<div class="ps-content">
						<p>Praesent gravida pretium mauris a cursus. Proin feugiat fringilla tristique. In congue libero eleifend, condimentum tortor vitae, viverra purus. Integer at fringilla sem. Donec vel posuere tortor. Sed a tempor velit. Quisque non elit ligula. Praesent
							velit massa, tempor non vulputate id, iaculis eget nulla. In hac habitasse platea dictumst. </p>

						<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
							Phasellus pellentesque purus id suscipit fringilla.</p>

					</div>
				</div>
			</div>

			<!-- Section Column -->
			<div class="section_half ps_column">
				<div class="ps-content-wrap" style="color: #ffffff;">
					<div class="ps-title">
						<h3>COLUMN RIGHT</h3>
					</div>
					<div class="ps-content">
						<p>Praesent gravida pretium mauris a cursus. Proin feugiat fringilla tristique. In congue libero eleifend, condimentum tortor vitae, viverra purus. Integer at fringilla sem. Donec vel posuere tortor. Sed a tempor velit. Quisque non elit ligula. Praesent
							velit massa, tempor non vulputate id, iaculis eget nulla. In hac habitasse platea dictumst. </p>

						<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
							Phasellus pellentesque purus id suscipit fringilla.</p>

						<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
							Phasellus pellentesque purus id suscipit fringilla.</p>

						<p>Nullam scelerisque arcu dui, sed feugiat nunc dictum at. Mauris porttitor enim et massa dictum mattis. Cras non porttitor magna, nec aliquet ipsum. Nulla ac diam gravida, congue quam in, porta lorem. Integer vestibulum tempor urna sed porttitor.
							Phasellus pellentesque purus id suscipit fringilla.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer>
		<div class="ps-title">
			<h3>Footer section</h3>
		</div>
	</footer>

关于html - 如何制作全出血布局(分为两半)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35621580/

26 4 0
文章推荐： javascript - 单击特定元素时创建突出显示，并在不活动时隐藏其他元素
文章推荐： javascript - javascript 中的clearInterval 和 setInterval 立即
文章推荐： javascript - 我的文本区域值不会进入数据库
文章推荐： c++ - 在图像中的一些点周围绘制边界
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com