octopress에서 헤더의 너비를 100 %로 변경합니다.

저는 자신의 octopress 테마에서 작업 중이므로 헤더를 수정하여 에서 브라우저의 너비를 100 % 사용할 수 있습니다. 나는 "_styles.scss"이 추가 :octopress에서 헤더의 너비를 100 %로 변경합니다.

header[role="banner"] { 
    background-image: url(/images/header-bg.png); 
    background-repeat: repeat; 
    position:relative; 
    width: 100%; 
}

하지만 난이 얻을 모든이 결과 : enter image description here

이

기본 레이아웃 인 default.html을에있는 항목입니다.

{% capture root_url %}{{ site.root | strip_slash }}{% endcapture %} 
{% include head.html %} 
<body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == false %} class="no-sidebar" {% endif %} {% if page.sidebar == 'collapse' or site.sidebar == 'collapse' %} class="collapse-sidebar sidebar-footer" {% endif %}> 
    <header role="banner">{% include header.html %}</header> 
    <nav role="navigation">{% include navigation.html %}</nav> 
    <div id="main"> 
    <div id="content"> 
     {{ content | expand_urls: root_url }} 
    </div> 
    </div> 
    <footer role="contentinfo">{% include footer.html %}</footer> 
    {% include after_footer.html %} 
</body> 
</html>

head.html :

<!DOCTYPE html> 
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]--> 
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]--> 
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <title>{% if page.title %}{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %} - {% endif %}{{ site.title }}</title> 
    <meta name="author" content="{{ site.author }}"> 

    {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %} 
    <meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}"> 
    {% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %} 

    <!-- http://t.co/dKP3o1e --> 
    <meta name="HandheldFriendly" content="True"> 
    <meta name="MobileOptimized" content="320"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %} 
    <link rel="canonical" href="{{ canonical }}"> 
    <link href="{{ root_url }}/favicon.png" rel="icon"> 
    <link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" /> 
    <link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml"> 
    <script src="{{ root_url }}/javascripts/modernizr-2.0.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script> 
    <script src="{{ root_url }}/javascripts/octopress.js" type="text/javascript"></script> 
    {% include custom/head.html %} 
    {% include google_analytics.html %} 
</head>

사용자 정의/HEADER.html 현재 :

이

<hgroup> 
    <h1><a href="{{ root_url }}/">{{ site.title }}</a></h1> 
    {% if site.subtitle %} 
    <h2>{{ site.subtitle }}</h2> 
    {% endif %} 
</hgroup>

누군가가 내가이 문제를 해결할 수있는 방법을 알고 있나요?

최고 감사합니다.

출처

2014-05-21 Cracksoldier

HTML을 제공 할 수 있습니까? – LcSalazar

문서 및 튜토리얼에서 읽은 정보가 있기 때문에 스타일이 단지 sass 및 * .scss 파일을 통해 관리된다는 정보를 얻었 기 때문에 일반 html 파일을 변경하지 않았습니다. 내 테마 소스는 다음과 같습니다. https://www.mediafire.com/?25f4e4ebl1xcvfy – Cracksoldier

위의 "default.html"의 html을 추가했습니다. – Cracksoldier

특정 영역 만 배경으로 색칠하고자 할 때 비슷한 문제가있었습니다. 헤더가 본문과 다른 div에 있는지 확인해야합니다. custom/head.html에 hgroup을 넣고 head의 전체 너비가 있는지 확인하십시오.

출처

2014-08-18 17:22:53 spasticninja

octopress에서 헤더의 너비를 100 %로 변경합니다.

답변

관련 문제