骨架CSS-如何跨越屏幕的宽度？_Css_Skeleton Css Boilerplate

骨架CSS-如何跨越屏幕的宽度？

css

骨架CSS-如何跨越屏幕的宽度？,css,skeleton-css-boilerplate,Css,Skeleton Css Boilerplate,我正在看www.getskeleton.com。我的页眉和页脚应该跨越100%。我能在不“破坏”框架的情况下做到这一点吗？或者我应该将布局限制为960px？您可能不需要固定元素，但这是一种在不改变其父元素行为的情况下使元素全宽的方法注：与绝对定位类似，元素将从流中取出，底部的顶部需要相应更改。填充以适应每个元素的高度应该做到这一点 header, footer{ position: fixed; width: 100%; } header{ top: 0; left: 0;

我正在看www.getskeleton.com。我的页眉和页脚应该跨越100%。我能在不“破坏”框架的情况下做到这一点吗？或者我应该将布局限制为960px？

您可能不需要固定元素，但这是一种在不改变其父元素行为的情况下使元素全宽的方法

注：与绝对定位类似，元素将从流中取出，底部的顶部需要相应更改。填充以适应每个元素的高度应该做到这一点

header,
footer{
  position: fixed;
  width: 100%;
}

header{
  top: 0;
  left: 0;
}

footer{
  bottom: 0;
  left: 0;
}

没有。即使你给宽度=100%，它也不会工作。因为网页垂直分为两部分。标题显示在右侧部分。如果您使用Tiles会更好。

我意识到这是一篇旧文章，但我想添加我的解决方案，以防将来其他人需要这些信息：

是的，您可以使用骨架制作多宽度布局。我采用了骨架框架，还根据我的需要修改了一些来自“杂志”示例站点的CSS/html

------HTML代码-放在“Body”标记之间-------------

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}

body    {
color: #333333;
padding: 0px;   
    }

img {
max-width: 100%;
}


#top    {
width: 100%;
background: #069;
border-bottom: 3px solid #FC6;
padding: 8px;
margin: 0px;
}

nav.main-nav    {
text-align: right;
font-size: 12px;
padding: 110px 0px 0px 0px;
color: #666666;
}

nav.top-subnav  {
font-size: 11px;
color: #f6f6f6;
text-align: center;
}

nav.main-nav ul li {
display: inline;
list-style-type: none;
padding-left: 20px; 
}

#Feature-Banner {
width: 100%;
margin: 0px 0px 20px 0px;
}

.footer {
width: 100%;
background-color: #063;
color: #f6f6f6;
margin: 20px auto 0px auto; 
padding: 20px 0px;
font-size: 10px;
line-height: 18px;
}

.footer ul li   {
margin: 0px 0px 0px 15px;
line-height: 16px;
font-size: 10px;
}

.footer h6 {
color: #CCC;
margin: 0px 0px 5px 0px;    
}

.textRight  {
text-align: right;  
}

.contactTitle   {
font-weight: bold;
font-size: 11px;
}

#Credits    {
width: 100%;
font-size: 11px;
background-color: #033;
color: #cccccc;
text-align: center; 
padding: 20px 10px;
letter-spacing: 0.09em;
border-top: 1px solid #444444;
}

==========================================

这将为您提供以下信息：

顶部的全宽颜色栏，可选择在其中添加链接/导航徽标、主导航、横幅/功能图形的标题区域主体的3列居中布局全宽页脚和下方的信用栏

希望这有助于其他人！分享知识！：）

≈

伪全屏的一个选项是将容器div嵌套在语义html5标记或更大的div中

请跳到以获取一个很好的示例。见下面的解释

从html开始：

<body>
 <header id="masthead">
  <div class="container sixteen columns">
   <hgroup>
    <img class="scale-with-grid" src="images/logo.png" />
    <h1>Masthead Title</h1>
    <p>Website tag line</p>
   </hgroup>
  </div>
 </header>

 <section id="main">
  <div class="container">
   <div class="two-thirds columns">
    <header>
     <h1>Page Title</h1>
    </header>
    <p>Meat of the page</p>
   </div><!-- close column -->
   <div class="one-third column">
    <p>side column stuff</p>
   </div><!-- close column -->
  </div><!-- close container -->
 </section>

 <footer id="attribution">
  <div class="container">
   <p>attribution</p>
  </div><!-- close container -->
 </footer>
</body>

现在，在容器div被很好地定位的同时，更大的元素填充了整个空间。

好的，对于那些像1500万年前一样仍在寻找答案的人，下面是我所做的。我不在我想要的100%宽度的元素上使用骨架样板。例如，我想要顶部导航的全宽，但我也想要一个主要内容和一个侧边栏。下面是一些代码

<nav class="navig-bar">
    <ul>
        <li class="pages">Page 1</li>
        <li class="pages">Page 2</li>
        <li class="pages">Page 3</li>
    </ul>
</nav>
<div class="container">
    <section class="eleven columns">Main Content</section>
    <aside class="five columns">Sidebar Content</aside>
</div>

这将完成任务，至少对我来说效果很好。

这是一段来自框架示例页面的代码，HTML将容器包装在另一个div中。在示例中，它是一个完整的图像背景，使用

background-image: url('../images/values-bg.jpg'); 
background-size: cover;

在css文件中的

.values

我将其简化为灰色背景，但您所要做的就是将上面的值与您的图像链接在一起，这样您就可以开始了。我希望这能更好地回答你的问题

<div class="section values">
<div class="container">
  <div class="row">
    <div class="one-third column value">
      <h2 class="value-multiplier">67%</h2>
      <h5 class="value-heading">Purchase Increase</h5>
      <p class="value-description">Percentage of users more likely to purchase on mobile friendly site.</p>
    </div>
    <div class="one-third column value">
      <h2 class="value-multiplier">90%</h2>
      <h5 class="value-heading">Multi-device Users</h5>
      <p class="value-description">Most of the world accesses the internet on multiple devices.</p>
    </div>
    <div class="one-third column value">
      <h2 class="value-multiplier">66%</h2>
      <h5 class="value-heading">Sad Users</h5>
      <p class="value-description">Percentage of users that are frustrated with page load times.</p>
    </div>
  </div>
</div>

是的，骨架不流畅/流动。因此-骨架不能在我的情况下使用？？？如果您想要流动布局，则不能使用。您应该使用960px网格。非常感谢您的回答。我知道有一种方法可以做到这一点，而不会完全抹杀原始的网格系统。

.navig-bar{width: 100%;}
    .navig-bar ul{list-style: none;text-align: center; }
        .navig-bar ul li{display: inline-block;}

background-image: url('../images/values-bg.jpg'); 
background-size: cover;

<div class="section values">
<div class="container">
  <div class="row">
    <div class="one-third column value">
      <h2 class="value-multiplier">67%</h2>
      <h5 class="value-heading">Purchase Increase</h5>
      <p class="value-description">Percentage of users more likely to purchase on mobile friendly site.</p>
    </div>
    <div class="one-third column value">
      <h2 class="value-multiplier">90%</h2>
      <h5 class="value-heading">Multi-device Users</h5>
      <p class="value-description">Most of the world accesses the internet on multiple devices.</p>
    </div>
    <div class="one-third column value">
      <h2 class="value-multiplier">66%</h2>
      <h5 class="value-heading">Sad Users</h5>
      <p class="value-description">Percentage of users that are frustrated with page load times.</p>
    </div>
  </div>
</div>

.values {
background-color: #aaa;
color: #fff;
padding-bottom: 5rem;
}