根据容器边距定位边栏

时间:2018-03-15 07:19:20

标签: javascript html css layout

我正在开发一个新的全宽度布局,我在左侧有侧边栏。页面内容的最大宽度和边距:0自动。当我想将此侧边栏放在内容的相同区域并尊重边距自动时,问题就出现了。我发现实现这一目标的唯一方法是通过JS。

以下是一个例子:

(function(){

	var adjustSidebarPosition = function(){
    var sidebar = document.getElementById('sidebar');
    var container = document.getElementsByClassName('container')[0];  
    var containerBounding = container.getBoundingClientRect();  
    sidebar.style.left = containerBounding.left + 'px'; 
  }();
  
})();
body{
  font-size: 16px;
}
.top-banner{
  height: 150px;
  width: 100%;
  background-color: #644FBF;
}

.sidebar{
  width: 120px;
  height: 200px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  position: absolute;
  top: 24px;
}

.blue-bckg{
  background-color: #F2F9FD;
}

.container{
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

.side-bar-padding{
  padding-left: 200px;
}
<div class="top-banner">
  <div class="container side-bar-padding">
    <h1>Hello World</h1>
    <h2>This is another hello World</h2>
  </div>
</div>

<aside class="sidebar" id="sidebar">
  <h3>This is the sidebar</h3>
</aside>

<section class="blue-bckg">
  <div class="container side-bar-padding">
    <h2>This is the main content</h2>
    <p>
      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.
    </p>
  </div>
</section>
<section>
  <div class="container side-bar-padding">
    <h2>Another Content</h2>
    <p>
      The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages.

The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental.

To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. 
    </p>
  </div>
</section>

我们可以在没有JS的情况下这样做吗?

0 个答案:

没有答案