导航栏背景图像响应，右侧有另一个容器

>我试图让我的导航栏响应，但它有一个背景，我不能简单地添加它 100% 的宽度，因为在它旁边，在右侧，有一个通知面板，有一个固定宽度，如果我向导航栏添加 100% 宽度，它会扩展到容器宽度，并强制在其下设置通知面板。所以我需要的是将具有固定宽度的通知面板放在页面右侧，如果减小屏幕宽度，通知面板必须减小导航栏的宽度（导航栏会响应）。我附加我的代码非常简单：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="proba.css">
</head>
<body>
    <div class="navbar">
        <ul>
        </ul>
    </div>
    <div class="notification-panel">
    </div>
</div>
</body>
</html>

CSS代码：

 .container{
    max-width:1200px;
    height:1000px;
    margin: 0px auto;
    padding:0px;
    border:1px solid red;
}
.navbar{
    width:100%;  /*there should be the 100% to make the navbar responsive*/
    height: 58px;
    background-image: url('menu.png');
    background-size: 100% 100%;
    float:left;
    margin-left:5px;
}
.notification-panel {
    float:left;
    width:230px;
    height:800px;
    border:1px solid red;
}

谢谢你们

您可以使用

calc()

 .container {
   max-width: 1200px;
   height: 1000px;
   margin: 0px auto;
   padding: 0px;
   border: 1px solid red;
 }
 
 .navbar {
   width: calc(100% - 235px);
   height: 58px;
   background-image: url('menu.png');
   background-size: 100% 100%;
   float: left;
   margin-left: 5px;
 }
 
 .notification-panel {
   float: left;
   width: 230px;
   height: 800px;
   border: 1px solid red;
   box-sizing: border-box;
 }

<div class="container">
<div class="navbar">
  <ul>
  </ul>
</div>
<div class="notification-panel">
</div>
</div>

或带有flex-grow: 1;的 flexbox，.navbar，因此它将增长以占用通知面板剩余的所有可用空间

 .container {
   max-width: 1200px;
   height: 1000px;
   margin: 0px auto;
   padding: 0px;
   border: 1px solid red;
   display: flex;
 }
 
 .navbar {
   flex-grow: 1;
   /*there should be the 100% to make the navbar responsive*/
   height: 58px;
   background-image: url('menu.png');
   background-size: 100% 100%;
 }
 
 .notification-panel {
   width: 230px;
   height: 800px;
   border: 1px solid red;
   box-sizing: border-box;
 }

<div class="container">
  <div class="navbar">
    <ul>
    </ul>
  </div>
  <div class="notification-panel">
  </div>
</div>

相关内容

最新更新

热门标签：