首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法获取填充列的颜色

无法获取填充列的颜色
EN

Stack Overflow用户
提问于 2021-09-17 01:36:31
回答 1查看 36关注 0票数 3

我试图让整个列显示为灰色,但只有一半是灰色的,我不知道如何修复它。This is what It looks like。我试着让cloumn有一个背景色,但是没有起作用。我现在不知道该怎么做了。

这是我想要修复的HTML的主要部分。

HTML:

代码语言:javascript
运行
复制
 <div class = "row">
            <div class = "column1">
                <div class = "sidenav">
                    <h2 id = "CSUSMCourses">California State University of San Marcos Courses</h2>
                        <button id = "button"> First Year</button>
                        <button id = "button2"> Second Year</button>
                        <button id = "button3"> Third Year</button>
                        <button id = "button4"> Fourth Year</button>
                    <h2 id = "CommunityCollege">Community College Courses</h2>
                        <button id = "button5"> SaddleBack Community College</button>
                        <button id = "button6"> IVC Community College</button>
                </div>
            </div>

这是CSS部分。我不知道我需要做什么才能让整个列变成灰色。

CSS代码:

代码语言:javascript
运行
复制
body 
{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.header
{
    padding-left:16px;
    text-align: center;
}
  
.topnav 
{
    overflow: hidden;
    background-color: #333;
}
  
.topnav a 
{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
.topnav a:hover 
{
    background-color: #ddd;
    color: black;
}
  
.topnav a.active 
{
    background-color: #1F51FF;
    color: white;
}

.sidenav 
{
    overflow: hidden;
    background-color: #333;
}
  
.sidenav button 
{
    background-color: #333; /* Green background */
    border: 1px solid black; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
}

.sidenav button:not(:last-child) 
{
    border-bottom: none; /* Prevent double borders */
}
  
.sidenav button:hover
{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
background-color: #1F51FF;
}

.column1
{
    float: left;
    width: 19%;
    height: 100;
    margin-right: 1%;
    background-color: #333;
    clear: both;
}
.column2
{
    float: left;
    width: 80%;
    background-color: white;
}

#CSUSMCourses, #CommunityCollege
{
    color: white;
}
EN

回答 1

Stack Overflow用户

发布于 2021-09-17 01:46:36

您可以将column1的高度设置为100vh,而不是仅仅设置为100vh。

代码语言:javascript
运行
复制
.column1{
    height: 100vh;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69216832

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档