首页 > 试题广场 >

编写 HTMLCSS 代码，实现如下布局。注：如能实现 l

[问答题]
编写 HTML/CSS 代码，实现如下布局。注：如能实现 left bar、content、right bar 的高度，自适应为三者的最高高度，可享额外加分


添加回答
JsonWang0102头像 JsonWang0102 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #header {
            height: 100px;
            width: 100%;
            background-color: #7ecef3;
        }

        /*使用absolute 单位实现高度自适应*/
        #conent {
            width: 100%;
            position: absolute;
            display: flex;
            top: 100px;
            bottom: 100px;
        }

        #left {
            width: 200px;
            /*height: 200px;*/
            background-color: #89c997;
        }

        #right {
            width: 200px;
            /*height: 200px;*/
            background-color: #89c997;
        }

        #middle {
            flex: 1;
            background-color: #53b9be;
        }

        #footer {
            height: 100px;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: #7ecef3;
        }
    </style>
</head>
<body>
<div id="header"></div>
<div id="conent">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
编辑于 2019-04-13 16:51:00 回复(1)
你要加油！努力！再努力～头像 你要加油！努力！再努力～ 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        header,
        footer {
            height: 200px;
            background: #7ecef3;
        }
        main{
            height: 500px;
            display: flex;
        }
        main .left, main .right {
            width: 200px;
            height: 100%;
            background: #89c997;
        }
        .main {
            flex: 1;
        }
    </style>
</head>
 
<body>
    <header>Header</header>
    <main>
        <div class="left">Left Bar</div>
        <div class="main">Content</div>
        <div class="right">Right Bar</div>
    </main>
    <footer>Footer</footer>
</body>
 
</html>

发表于 2019-08-14 22:35:59 回复(1)
丶末漓莫离头像 丶末漓莫离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body {
display: flex;
flex-direction:column;
margin: 0px;
padding: 0px;
}
#box{
display: flex;
min-height: 100vh;
justify-content:space-between;
flex-direction: column;
}
header,footer {
flex:0 0 50px;
background-color:#7ecef3;
}
#body {
display:flex;
flex:1;
}
#body #content {
flex:1;
background-color:#53b9be;
}
#body #left-bar {
flex:0 0 200px;
order:-1;
background-color:#89c997;
}
#body #right-bar {
flex:0 0 200px;
background-color:#89c997;
}
</style>
<body id="holyGrail">
<div id="box">
<header></header>
<div id="body">
<div id="content"></div>
<div id="left-bar"></div>
<div id="right-bar"></div>
</div>
</div>
<footer></footer>

</body>
</head>
</html>
发表于 2019-03-31 22:40:38 回复(0)
呼啦婷婷头像 呼啦婷婷 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .tb {
            height: 100px;
            background-color: #7ecef3;
        }
        .container {
            display: flex;
            height: 100%;
        }
        .left,
        .right {
            width: 200px;
             height: 100%;
            background-color: #89c997;
        }
        .main {
            flex:1;
             height: 100%;
            background-color: #53b9b3;
        }
        
    </style>
</head>
<body>
    <div class="tb">Header</div>
    <div class="container">
        <div class="left">Left Bar</div>
        <div class="main">Main</div>
        <div class="right">Right Bar</div>
    </div>
    <div class="tb">Footer</div>
</body>
</html>

发表于 2021-06-06 21:17:55 回复(0)
某不知名用户头像 某不知名用户 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
 
 
.header {
  background-color: #7ecef3;
  width: 100%;
  height: 100px;
}
.box {
  display: flex;
  justify-content: center;
}
.left {
  float: left;
  width: 200px;
  background-color: #89c997;
}
.right {
  float: right;
  width: 200px;
  background-color: #89c997;
}
.content {
  height: 300px; /*  其他自适应为最高 */
  width: 100%;
  background-color: #53b9be;
}
.footer {
  background-color: #7ecef3;
  width: 100%;
  height: 100px;
}
</style>
</head>
<body>
  <div class="header">
    header
  </div>
  <div class="box">
    <div class="left"> left </div>
    <div class="content"> content </div>
    <div class="right"> right </div>
  </div>
  <div class="footer"> footer </div>
<script>
</script>
</body>
</html>

发表于 2020-07-04 00:44:33 回复(0)
牛客164919812号头像 牛客164919812号
第一眼就是弹性盒子…
发表于 2020-05-28 03:58:28 回复(0)
牛客755955048号头像 牛客755955048号
<html> <body> <header>Header</header> <main> <section>Left Bar</section> <section>Content</section> <section>Right Bar</section> </main> <footer>Footer</footer> </body></html>
编辑于 2020-05-25 15:25:54 回复(0)
再别孙悟空头像 再别孙悟空 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

        <script type="text/javascript">
            window.onload = function () {
            }

           /* var arr0=["a","b","c","d","e"];
            var newArr=arr0.slice(1,3);
            alert(newArr);
            alert(arr0);*/
            var arr0=["a","b","c","d","e"];
            //arr0.reverse();
        </script>
        <style type="text/css">
                *
                {
                    margin: 0;
                    padding: 0;
                }
                #header{
                    background-color: (1870)#7ecef3;
                    width: 100%;
                    height: 100px;
                }
                .mainContent
                {
                    width: 100%;
                    position: absolute;
                    display: flex;
                    top: 100px;
                    bottom: 100px;
                }
        .left {
            width: 200px;
            /*height: 200px;*/
            background-color: #89c997;
        }
 
        .right {
            width: 200px;
            /*height: 200px;*/
            background-color: (1871)#89c997;
        }
 
        .middle {
            flex: 1;
            background-color: #53b9be;
        }
 
        .footer {
            height: 100px;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: (1872)#7ecef3;
        }
        </style>
    </head>

    <body>
        <div id="header"></div>
        <div class="mainContent">
            <div class="left"></div>
            <div class="middle"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </body>

</html>

发表于 2020-03-09 11:52:14 回复(0)
磷加锌头像 磷加锌 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局自适应</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            border: 0;
        }
        header, footer {
            width: 100%;
            height: 100px;
            background-color: #7ecef3;
        }
        main {
            width: 100%;
            min-height: calc(100% - 200px); /*设置最小高度，当内容过少时高度为整个页面减去头尾，当内部某个高度过高则会撑开，实现高度自适应为三者的最高高度*/
            display: flex;
        }
        main #leftBar, main #rightBar {
            width: 200px;
            background-color: #89c997;
        }
        main #content {
            background-color: #53b9be;
            flex: 1;
        }
    </style>
</head>
<body>
<header></header>
<main>
    <div id="leftBar"></div>
    <div id="content"></div>
    <div id="rightBar"></div>
</main>
<footer></footer>
</body>
</html>

编辑于 2020-01-03 16:36:13 回复(0)
许许如生头像 许许如生 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
*{
    padding: 0px;
    margin: 0px;
}
#centerContent{
    display: flex;
    flex-flow: row nowrap;
}
#id2{
    flex-grow: 1;
}
.side{
    flex-grow: 0;
    height: 500px;
}
</style>
<body>
<div style="width: 100%; background-color: #7ecef3; height: 80px;"></div>
<div id="centerContent">
    <div id="id1" class="side" style="background-color: #89c997; width: 200px;"></div>
    <div id="id2" style="background-color: #53b9be;" ></div>
    <div id="id3" class="side" style="background-color: #89c997; width: 200px;"></div>
</div>
<div style="width: 100%; background-color: #7ecef3; height: 80px;"></div>
<script>

</script>
</body>
</html>

发表于 2019-12-30 16:50:45 回复(0)
MiraSofia头像 MiraSofia
 <style>
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
      }
      main {
        display: flex;
        flex-direction: row;
        flex: 1;
        width: 100%;
        height: 100%;
        background-color: 'red';
      }
      .left {
        width: 200px;
        background-color: #89c997;
      }
      .main {
        background-color: #53b9be;
        flex: 1;
      }
      .right {
        width: 200px;
        background-color: #89c997;
      }
      header {
        height: 60px;
        background-color: #7ecef3;
      }
      footer {
        height: 60px;
        background-color: #7ecef3;
      }
    </style>
  </head>

  <body>
    <header>Header</header>
    <main>
      <div class="left">Left Bar</div>
      <div class="main">Content</div>
      <div class="right">Right Bar</div>
    </main>
    <footer>Footer</footer>
  </body>
发表于 2019-12-18 22:21:15 回复(0)
牛客590701168号头像 牛客590701168号
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
        }

        .wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .header,.footer {
            width: 100%;
            flex: 1;
            background-color: #7ecef3;
        }

        .contnetWrapper {
            flex: 4;
            width: 100%;
            display: flex;
        }

        .leftBar,.rightBar {
            flex: 0 0 200px;
            background-color: #89c997;
        }

        .content {
            flex:auto;
            background-color: #53d9be;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="contnetWrapper">
            <div class="leftBar"></div>
            <div class="content"></div>
            <div class="rightBar"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>

</html>
发表于 2019-12-10 21:26:50 回复(0)
正义de键盘侠头像 正义de键盘侠
.body{
    width: 800px;
    height: 800px;
    display: flex;
    flex-direction: column;         /*定义子元素是从上往下排列*/
    align-items:stretch;            /*若子元素没有设置高度，则自适应*/
}
.body_Header{
    flex:none;
    background-color: #7ecef3;
    height: 100px;
}
.body_Center{
    flex:auto;
    background-color: #e74382;
    display: flex;
    flex-direction: row;
    align-items: stretch;           /*若子元素没有设置高度，则自适应*/
}
.body_Center_left{
    flex: none;
    width: 200px;
    background-color: #89c997;  
}
.body_Center_center{
    flex: auto;                     /*设置自身自适应宽度*/
    background-color: #53b9be;  
}
.body_Center_right{
    flex:none;
    background-color: #89c997;
    width: 200px;
}
.body_Footer{
    flex:none;
    background-color: #7ecef3;
    height: 100px;
}
/*定义元素里面的字***置跟颜色*/
.middleAndFontColor {
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class = 'body'>
        <div class = 'body_Header middleAndFontColor'>body_Header</div>
        <div class = 'body_Center'>
            <div class = 'body_Center_left middleAndFontColor'>body_Center_left</div>
            <div class = 'body_Center_center middleAndFontColor'>body_Center_center</div>
            <div class = 'body_Center_right middleAndFontColor'>body_Center_right</div>
        </div>
        <div class= 'body_Footer middleAndFontColor'>body_Footer</div>
    </div>

发表于 2019-12-03 00:09:09 回复(0)
月！头像 月！
<!DOCTYPE html>
<html>
<head>
<style>
    html,body{margin:0px}
    
    .wrapper{
        display:grid;
        border:1px solid red;
        grid-template-rows: 50px 50px 50px;
        }
    
    .hea-ber{
        background-color: #7ecef3;
        color:white;
        text-align: center;
        grid-column: 1/4;
    }
    
    .left-bar{
        background-color: #89c997;
        color:white;
        text-align: center;
    }
    
    .conter-bar{
        background-color: #52b9be;
        color:white;
        text-align: center;
    }
    
    .right-bar{
        background-color: #89c997;
        color:white;
        text-align: center;
    }
    
    .footer{
        background-color: #7ecef3;
        color:white;
        text-align: center;
        grid-column: 1/4;
    }
</style>
    </head>
        <div class="wrapper">
            <header class="hea-ber">heaber</header>
            <main class="left-bar">leftbar</main>
            <main class="conter-bar">conter</main>
            <main class="right-bar">right-bar</main>
            <footer class="footer">footer</footer>
        </div>
    </body>
</html>

发表于 2019-11-28 19:32:59 回复(0)
star_201809291454273头像 star_201809291454273 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <title>Title</title>
</head>
<style>
  html,body{
    margin: 0;
    height: 100%;
  }
header{
  position: relative;
  background-color: aqua;
  width: 100%;
  height: 100px;
}
footer{
  position: absolute;
  bottom: 0;
  background-color: beige;
  width: 100%;
  height: 100px;
}
.container{
  display: flex;
  overflow: hidden;
}
.left,.right{
  width: 200px;
  padding-bottom: 2000px;
  margin-bottom: -2000px;
  background-color:darkgoldenrod;
}
.middle{
  height: 200px;
  width: 100%;
  background-color: chartreuse;
  flex: 1 1 auto;
}
</style>
<body>
  <header></header>
  <div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>
  <footer></footer>
</body>
</html>


发表于 2019-09-10 15:39:17 回复(0)
LibraLoveAries头像 LibraLoveAries

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>test</title>

        <style type="text/css">
            .container {
               width:100%;
                display:flex;
                flex-direction:column;
                justify-content:flex-start;
                align-item:center;
              }
              .header,.footer {
                width:100%;
                height:20vh;
                background-color:#7ecef3;
                }
                .row{
                display:flex;
                flex-direction:row;
                justify-content:flex-start;                
                flex:1;
                }
               .left-bar,.right-bar{
            width:20vw;
            background-color:#89c997;
                }
               .content{
                flex:1;
                background-color:#53b9be;
                }
                
        </stylle>
    </head>
    <body>
        <div class="container">
            <div class="header"></div>
            <div class="row">
                    <div class="left-bar"></div>
                    <div class="content"></div>
                    <div class="right-bar"></div>
            </div>
            <div class="footer"></div>   
        </div>
    </body>
</html>


发表于 2019-05-18 08:49:54 回复(0)
橙橙橙笙头像 橙橙橙笙 
<!DOCTYPE html>
<html>     <head>         <meta charset="utf-8" />         <link rel="stylesheet" type="text/css" href="css/index.css" />     </head>     <body>          <div class="Header" style="background-color: #7ecef3;width: 100%;height: 150px;">              <h1 style="line-height: 150px;text-align: center;">Header</h1>          </div>          <div class="contain" style="width:100%">              <div class="Left Bar" style="background-color: #89c997;width: 200px;height: 450px;float: left;">                  <h1 style="line-height: 450px;text-align: center;">Left Bar</h1>              </div>              <div class="Content" style="background-color: #53b9be;height: 450px;width: auto;float: left;">                  <h1 style="line-height: 450px;text-align: center;">Content</h1>              </div>              <div class="Right Bar" style="background-color:#89c997;width: 200px;height: 450px;float: right;">                  <h1 style="line-height: 450px;text-align: center;">Right Bar</h1>              </div>          </div>                    <div class="Footer" style="background-color: #7ecef3;width:100%;height:100px;float: left;">              <h1 style="line-height: 100px;text-align: center;">Footer</h1>          </div>     </body>
</html>

发表于 2019-04-22 10:10:21 回复(0)
Richdro头像 Richdro 
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="flexbox">
    <div class="head">
    </div>
    <div class="main">
      <div class="leftbar">
      </div>
      <div class="content">

      </div>
      <div class="rightbar">

      </div>
    </div>
    <div class="footer">

    </div>
  </div>
</body>
<style media="screen">
  html,
  body {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .flexbox {
    height:100vh;
    display:flex;
    flex-flow: column nowrap;
  }

  .head,
  .footer {
    height: 20%;
    width: 100%;
    background-color: #7ecef3
  }

  .main {
    display: flex;
    flex-grow: 1;
    width: 100%

  }

  .leftbar {
    width: 200px;
    background-color: #89c997
  }

  .content {
    flex-grow: 1;
    background-color: #53b9be;
  }

  .rightbar {
    width: 200px;
    background-color: #89c997;
  }
</style>

</html>

发表于 2019-04-18 15:40:15 回复(0)
喵星届的扛把子头像 喵星届的扛把子
.head,.fotter {
width: 100%;
background: #7ecef3;
height: 80px;
}
.content {
width: 100%;
height: 200px;
display: flex;
}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.left,.right {
width: 200px;
background: #89c997;
}
.center {
flex: 1;
background: #53b9be;
}
.left,.right,.center {
float: left;
height: 100%;
display: table-cell;
}
</style>
<div class="head">
</div>
<div class="content clearfloat">
    <div class="left">
    </div>
    <div class="center">
    </div>
    <div class="right">
    </div>
</div>
<div class="fotter">
</div>
发表于 2019-04-15 15:20:14 回复(0)
Meiko201811042221226头像 Meiko201811042221226 
<!DOCTYPE html>
	

		<html lang="en"> 
	


	

		<head> 
	


	

		<meta charset="UTF-8"> 
	


	

		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	


	

		<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
	


	

		<title>Document</title> 
	


	

		</head> 
	


	

		<style> 
	


	

		html *{
	


	

		padding: 0;
	


	

		margin: 0;
	


	

		}
	


	

		#Header
	


	

		{
	


	

		background-color:#7ecef3;
	


	

		text-align: center;
	


	

		}
	


	

		#container
	


	

		{
	


	

		width: 100%;
	


	

		overflow: hidden;
	


	

		}
	


	

		#LeftBar
	


	

		{
	


	

		background-color:#89c997;
	


	

		float: left;
	


	

		width: 200px;
	


	

		}
	


	

		#Content
	


	

		{
	


	

		width: auto;
	


	

		float:left;
	


	

		background-color: #53b9be;
	


	

		}
	


	

		#RightBar
	


	

		{
	


	

		background-color:#89c997;
	


	

		float:right;
	


	

		width:200px;
	


	

		}
	


	

		#Footer{
	


	

		background-color:#7ecef3;
	


	

		}
	


	

		</style> 
	


	

		<body> 
	


	

		<div id="Header">Header</div> 
	


	

		<div id="container"> 
	


	

		<div id="LeftBar">Left Bar 定宽200px</div> 
	


	

		<div id="Content">Content 自适应宽度</div> 
	


	

		<div id="RightBar">Right Bar 定宽200px</div> 
	


	

		</div> 
	


	

		<div id="Footer">Footer</div> 
	


	

		</body> 
	


	

		</html>

发表于 2019-04-12 18:53:37 回复(0)
提交观点

问题信息

前端工程师 2019 蘑菇街
上传者：小小
难度：
33条回答 4770浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号