个人中心
gpt4 book ai didi

HTML5/CSS3 : Three column site not filling viewport width

转载 作者：行者123 更新时间：2023-11-28 01:55:26 27 4
gpt4 key购买 nike

我很难让不均匀的三栏网站填满视口(viewport)的整个宽度。理想情况下，左栏将覆盖宽度的 25%，中间 50%，右侧 25%。如果我无法做到这一点，那么我会要求所有三列的“单位”本身在视口(viewport)中居中。现在，所有三列都向左挤压。最终解决方案的可移植性对我来说非常重要:无论是在浏览器方面还是在设备方面，所以我不想设置固定的宽度/高度。

Screenshot of current problem 

body {
  background-color: white;
  color: white;
  padding: 0px;
}

header {
  background-color: #616161;
  text-align: center;
  width: 100%;
  position: static;
  padding-bottom: 15px;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #0d47a1;;
    height: 40px;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #5472d3;
    color: black;
}

main {
    background-color: #0d47a1;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
}

.row {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    clear: both;
}  

.column {
    padding: 15px;
    background-color: #373737;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
    margin:15px;
    float: left;
}

.left .right {
    width: 25%;
}

/* Middle column */
.middle {
    width: 50%;
}

.card {
    height: 100px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
}

article {
  background-color: #8e8e8e;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: white;
  margin-top: 15px;
}

section {
  background-color: #616161;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 25px;
}

footer {
    background-color: #616161;
    margin: auto;
    text-align: center;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

/* unvisited link */
a:link {
  color: #fcd734;
}

/* visited link */

a:visited {
  color:  #5472d3;
}

a:hover {
  text-decoration: underline;
}
<!doctype html>

<html>
    <head>
        <link rel="stylesheet" href="main.css">
    </head>

    <body>

        <header>
            <h1>DASK: Divorced and Separated Koinonia</h1>
            <br text-decoration: italic>Turning the dusk of divorce into new dawn.</br>
        </header>
        <nav class="topnav">
        </nav>

        <main>
        <div class="row">
            <section class="column left">
                <section>
                    <article class="card">
                        <h4>Profile</h4>
                        <p>Coming soon</p>
                    </article>
                    <article class="card">
                        <h4>Forum Posts</h4>
                        <p>Coming soon</p>
                    </article>
                </section>
                <section style="margin-top: 15px">
                    <h3>Events</h3>
                    <p>Coming soon</p>
                </section>
            </section>
            
            <section class="column middle">
            <section>
                <h2>What is DASK?</h2>
                <p>
                    DASK, or Divorced and Separated Koinonia, is a retreat designed by and for
                    people who have experienced divorce and separation. It is founded in the
                    Catholic religious tradition, but all are welcome. DASK is based on the popular
                    Koinonia retreat.
                </p>
                <h2>What is Koinonia?</h2>
                <p>
                    Koinonia is retreat program that is popular nation-wide, but was first founded
                    in Springfield, IL for adults. The word "koinonia" itself comes from the Greek
                    word for "community". The Koinonia retreat is run by many parishes, dioceses,
                    and college campuses in order to form communities and friendships based in
                    Christ. DASK finds that the focus on community is helpful to people going
                    through divorce and/or separation; we find that it is easy to feel "alone"
                    going through this process.
                </p>
                <p>
                    The theme of every DASK weekend is the Paschal Mystery; that is, the life,
                    death, and resurrection of Jesus.
                </p>
                <h2>Where can I get more information?</h2>
                <li>Download our <a href="static/img/dask_brochure_2018.pdf">brochure</a>.</li>
                <li>Like our <a href="https://www.facebook.com/daskretreats">Facebook page</a>.</li>
                <li>Email us at <a href="mailto:daskretreatsk@gmail.com">daskretreats@gmail.com</a>.</li>
                <li>Follow us on Twitter <a href="https://www.twitter.com/daskretreats">@daskretreats</a>.</li>
                <h2>How do I sign up?</h2>
                <p>
                    <a href="static/img/dask_brochure_2018.pdf">Download our brochure</a>, complete
                    the registration form inside, and submit it via snail mail or
                    <a href="mailto:daskretreats@gmail.com">email</a>. We host two retreat weekends
                    a year: in the Spring at Columbia, IL, and in the Fall at Springfield, IL.
                </p>
            </section>
            </section>
            
            <section class="column right">
                <section>
                    <h4>Donate</h4>
                    <p>Coming soon</p>
                </section>
                <section style="margin-top: 15px">
                    <article class="card">
                        <h4>Twitter</h4>
                        <p>Coming soon</p>
                    </article>
                    <article class="card">
                        <h4>News</h4>
                        <p>Coming soon</p>
                    </article>
                </section>
            </section>
        </div>
        </main>
        
        <footer>
        <p>
            Copyright (C) 2018: Divorced and Separated Koinonia, under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a>.
            <br><a href="daskretreats@gmail.com.com">daskretreats@gmail.com</a>
        </p>
        </footer>
    </body>
</html>

预先感谢您的帮助!

最佳答案

如果您要查找，请参阅以下代码。我采取几个步骤来实现它。起初你的选择器是错误的 .left .right，这是选择 right inside left 它应该 .left, .right。

body {
		  background-color: white;
		  color: white;
		  padding: 0px;
		}
        /* Added */
		* {
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		}
		
		header {
		  background-color: #616161;
		  text-align: center;
		  width: 100%;
		  position: static;
		  padding-bottom: 15px;
		  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
		  border-top-left-radius: 25px;
		  border-top-right-radius: 25px;
		}
		
		/* Style the top navigation bar */
		.topnav {
			overflow: hidden;
			background-color: #0d47a1;;
			height: 40px;
		}
		
		/* Style the topnav links */
		.topnav a {
			float: left;
			display: block;
			color: #f2f2f2;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		
		/* Change color on hover */
		.topnav a:hover {
			background-color: #5472d3;
			color: black;
		}
		
		main {
			background-color: #0d47a1;
			margin-top: 15px;
			margin-bottom: 15px;
			padding: 15px;
			box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
		}
		
		.row {
			display: table;
			margin-left: auto;
			margin-right: auto;
		}
		
		/* Clear floats after the columns */
		.row:after {
			content: "";
			clear: both;
		}  
		
		.column {
			padding: 15px;
			background-color: #373737;
			box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
			border-radius: 25px;
			margin:15px;
			float: left;
		}
		
		.left, .right {
			width: calc(25% - 30px); // Deducted margin space 15+15 = 30px;
		}
		
		/* Middle column */
		.middle {
			width: calc(50% - 30px); // Deducted margin space 15+15 = 30px;
		}
		
		.card {
			height: 100px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			border-radius: 25px;
		}
		
		article {
		  background-color: #8e8e8e;
		  padding-top: 15px;
		  padding-right: 15px;
		  padding-bottom: 15px;
		  padding-left: 15px;
		  color: white;
		  margin-top: 15px;
		}
		
		section {
		  background-color: #616161;
		  padding-top: 15px;
		  padding-right: 15px;
		  padding-bottom: 15px;
		  padding-left: 15px;
		  color: white;
		  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		  border-radius: 25px;
		}
		
		footer {
			background-color: #616161;
			margin: auto;
			text-align: center;
			box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
			border-bottom-left-radius: 25px;
			border-bottom-right-radius: 25px;
		}
		
		/* unvisited link */
		a:link {
		  color: #fcd734;
		}
		
		/* visited link */
		
		a:visited {
		  color:  #5472d3;
		}
		
		a:hover {
		  text-decoration: underline;
		}
<header>
        <h1>DASK: Divorced and Separated Koinonia</h1>
        <br text-decoration: italic>Turning the dusk of divorce into new dawn.</br>
    </header>
    <nav class="topnav">
    </nav>
    
    <main>
    <div class="row">
        <section class="column left">
            <section>
                <article class="card">
                    <h4>Profile</h4>
                    <p>Coming soon</p>
                </article>
                <article class="card">
                    <h4>Forum Posts</h4>
                    <p>Coming soon</p>
                </article>
            </section>
            <section style="margin-top: 15px">
                <h3>Events</h3>
                <p>Coming soon</p>
            </section>
        </section>
        
        <section class="column middle">
        <section>
            <h2>What is DASK?</h2>
            <p>
                DASK, or Divorced and Separated Koinonia, is a retreat designed by and for
                people who have experienced divorce and separation. It is founded in the
                Catholic religious tradition, but all are welcome. DASK is based on the popular
                Koinonia retreat.
            </p>
            <h2>What is Koinonia?</h2>
            <p>
                Koinonia is retreat program that is popular nation-wide, but was first founded
                in Springfield, IL for adults. The word "koinonia" itself comes from the Greek
                word for "community". The Koinonia retreat is run by many parishes, dioceses,
                and college campuses in order to form communities and friendships based in
                Christ. DASK finds that the focus on community is helpful to people going
                through divorce and/or separation; we find that it is easy to feel "alone"
                going through this process.
            </p>
            <p>
                The theme of every DASK weekend is the Paschal Mystery; that is, the life,
                death, and resurrection of Jesus.
            </p>
            <h2>Where can I get more information?</h2>
            <li>Download our <a href="static/img/dask_brochure_2018.pdf">brochure</a>.</li>
            <li>Like our <a href="https://www.facebook.com/daskretreats">Facebook page</a>.</li>
            <li>Email us at <a href="mailto:daskretreatsk@gmail.com">daskretreats@gmail.com</a>.</li>
            <li>Follow us on Twitter <a href="https://www.twitter.com/daskretreats">@daskretreats</a>.</li>
            <h2>How do I sign up?</h2>
            <p>
                <a href="static/img/dask_brochure_2018.pdf">Download our brochure</a>, complete
                the registration form inside, and submit it via snail mail or
                <a href="mailto:daskretreats@gmail.com">email</a>. We host two retreat weekends
                a year: in the Spring at Columbia, IL, and in the Fall at Springfield, IL.
            </p>
        </section>
        </section>
        
        <section class="column right">
            <section>
                <h4>Donate</h4>
                <p>Coming soon</p>
            </section>
            <section style="margin-top: 15px">
                <article class="card">
                    <h4>Twitter</h4>
                    <p>Coming soon</p>
                </article>
                <article class="card">
                    <h4>News</h4>
                    <p>Coming soon</p>
                </article>
            </section>
        </section>
    </div>
    </main>
    
    <footer>
    <p>
        Copyright (C) 2018: Divorced and Separated Koinonia, under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a>.
        <br><a href="daskretreats@gmail.com.com">daskretreats@gmail.com</a>
    </p>
    </footer>

关于HTML5/CSS3 : Three column site not filling viewport width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49663965/

27 4 0
文章推荐： php - 使用 WP_Query 填充的 Div 在移动浏览器上表现怪异，图形故障
文章推荐： javascript - javascript可以重写外部文件吗
文章推荐： c++ - 如何结合RegisterDragDrop，RoInitialize在一个线程中一起工作？
文章推荐： javascript - 在一页 session 中可以加载的 WebGL 纹理数量是否有限制？
行者123
个人简介

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

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