Question

好的，所以我有一些html和一些像这样的CSS：

.profile-sidebar {
  background-color: #666666;
  height: 100%;
  width: 14%;
}

.profile-title {
  position: fixed;
  top: 0%;
  padding-left: 15%;
  font-family: "Montserrat";
  font-size: 250%;
}

body {
  background-color: #cccccc;
}

.profile-footer {
  position: fixed;
  bottom: 0%;
  width: 100%;
  background-color: #4D4D4D;
  height: 15%;
}

.profile-accounts-bar {
  background-color: #f84646;
  height: 100%;
  width: 20%;
  position: fixed;
  bottom: -20%;
  padding-left: 20%;
}


<head>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>
  <div class="profile-sidebar"> </div>

  <div class="main">
    <h1 class="profile-title">[NAME] Social Media Accounts</h1>
    <div class="everything">
      <div class="profile-accounts-bar">
      </div>
    </div>

  </div>

  <div class="profile-footer">

  </div>

但到目前为止，它看起来像这样：https://haxified.is-a-me.me/34f6b82f.png 我希望它看起来像这样： https://haxified.is-a-me.me/a3545a93.png - 那就是插画家。

提前致谢！

Answer 1

使用固定元素对齐布局的所有位置都是一种糟糕的技术。您只需使用float元素来对齐您的布局，如下所示。

HTML

<div class="profile-sidebar"></div>
  <div class="main">
      <div class="profile-title">[NAME] Social Media Accounts</div>
      <div class="everything">
          <div class="profile-accounts-bar"> </div>
      </div>
  </div>
 <div class="profile-footer"></div>

<强> CSS

 html, body {height:100%;}
 .profile-sidebar {
    background-color: #666666;
    height: 100%;
    width: 14%;
    float:left;
  }

  .profile-title {  
    font-family: "Montserrat";
    font-size: 250%;
  }

  body {
    background-color: #cccccc;
  }

  .profile-footer {
     position: fixed;
     bottom: 0%;
     width: 100%;
     left:14.5%;
     background-color: #4D4D4D;
     height: 15%;
  }

  .profile-accounts-bar {
    background-color: #f84646;
    height: 100%;
    width: 5%;  
  }
  .main {float:left; width:86%; height:100%}
  .everything {height:100%}

＆＃13;

html, body {height:100%;}
.profile-sidebar {
  background-color: #666666;
  height: 100%;
  width: 14%;
  float:left;
}

.profile-title {  
  font-family: "Montserrat";
  font-size: 250%;
}

body {
  background-color: #cccccc;
}

.profile-footer {
  position: fixed;
  bottom: 0%;
  width: 100%;
  left:14.5%;
  background-color: #4D4D4D;
  height: 15%;
}

.profile-accounts-bar {
  background-color: #f84646;
  height: 100%;
  width: 5%;  
}
.main {float:left; width:86%; height:100%}
.everything {height:100%}

**Code Snippet**

＆＃13;

<div class="profile-sidebar"> </div>

  <div class="main">
    <div class="profile-title">[NAME] Social Media Accounts</div>
    <div class="everything">
      <div class="profile-accounts-bar">
      </div>
    </div>

  </div>

  <div class="profile-footer">

  </div>

＆＃13;

我的简单建议是使用Bootstrap进行这些布局。他们也有很多选择和支持负责任的布局。

CSS元素固定位置在页面上

1 个答案: