个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我定制了一个 WordPress 主题，它有一个固定的标题(包括 Logo 和导航栏)，并且在桌面版 Chrome 上一切正常。但是，在手机上查看时，当您向下滚动页面时，标题会被 chop 约 20 像素。
我尝试为各种元素设置固定高度，添加 overflow: auto，甚至 line-height:90px 到 .header，但似乎没有任何效果。
相关html:
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'pine' ); ?></a>
<div class="offcanvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-nav', 'container' => false ) ); ?>
</div><!-- /.offcanvas -->
<header class="header animated bounceInDown">
<div class="container">
<div class="row">
<div class="col-xs-6">
<?php pine_logo(); ?>
</div><!-- /.col -->
<div class="col-xs-6">
<button class="offcanvas-toggle">
<span></span>
<span></span>
<span></span>
</button><!-- /.main nav toggle -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</header><!-- /.header -->
<?php if ( ! is_404() ) : ?>
<div class="header-spacer"></div><!-- /.header spacer -->
<?php endif; ?>
<div id="content">
相关CSS:
.header {
position: fixed;
width: 100%;
background-color: #fff;
padding: 20px 0;
z-index: 10000;
}
.header-spacer {
min-height: 90px;
}
相关的javascript:
( function( $ ) {
'use strict';
var $body = $( 'body' );
var $header = $( '.header', $body );
var $headerSpacer = $( '.header-spacer', $body );
var $offcanvas = $( '.offcanvas', $body );
var $adminbar = $( '#wpadminbar', $body );
$( document ).on( 'ready', function() {
$adminbar = $( '#wpadminbar', $body );
} );
var adaptHeaderSpacerTimeout = null;
var nothing = null;
var $headerHeight = $header.outerHeight();
var adaptHeaderSpacer = function() {
if ( adaptHeaderSpacerTimeout !== null ) {
clearTimeout( adaptHeaderSpacerTimeout );
}
setTimeout( function() {
nothing = $header[0].offsetHeight;
$headerHeight = $header.outerHeight();
$headerSpacer.css( 'height', $headerHeight + 'px' );
if ( $body.hasClass( 'admin-bar' ) && $adminbar.length ) {
$offcanvas.css( 'top', ( $headerHeight + $adminbar.outerHeight() ) + 'px' );
}
else {
$offcanvas.css( 'top', $headerHeight + 'px' );
}
}, 400 );
};
adaptHeaderSpacer();
$( 'img', $header ).on( 'load', adaptHeaderSpacer );
$( document ).on( 'ready', adaptHeaderSpacer );
$( window ).on( 'resize orientationchange', adaptHeaderSpacer );
// Full-screen navigation
var $offcanvasToggle = $( '.offcanvas-toggle' );
$offcanvas = $( '.offcanvas' );
$offcanvasToggle.on( 'click', function() {
$offcanvas.toggleClass( 'offcanvas--active' );
$offcanvasToggle.toggleClass( 'offcanvas-toggle--active' );
} );
请帮忙。
最佳答案
您似乎在使用 Bootstrap 或类似的网格系统。在这些系统中，.row 需要包装 .container。将 container 类添加到 #content。 .container 的缺失使得特定的 .row 将 body 推得更大，从而达到您所看到的效果。
关于javascript - 固定 header 在手机上被 chop ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43243089/
24
4
0
我正在使用 onclick javascript 方法，动态内容如下: onclick="adviceEvent('${advice?.content}');" 建议内容介于字符串之间，例如: Che
我想 chop 一个具有字符限制的字符串，并且最后一个字符应该是空格的条件(这样我就没有被 chop 的单词) 示例: var sentence = "The string that I want t
我正在使用省略号 chop 文本并在工具提示上显示整个文本。如果文本溢出，则仅显示工具提示。工具提示在 Chrome 中看起来不错，但在 IE 和 Firefox 中却不行。在 IE 中，工具提示文本
我正在使用带有 rails ( http://jrvis.com/trunk8/#toggle ) 的 trunk8 jquery 插件，它只会 chop 前几个句子，直到第一个中断空格。这是我的代码
Readmore Js 只折叠 div block 而不折叠文本。请帮助我 chop 文本和 div 容器，而不仅仅是 div。非常感谢 London is the most popul
我有一个 div，它会动态填充一些可能包含或不包含链接的文本。 例如: Welcome to Stackoverflow. Someone will provide an answer to
作为一些背景 使用 Material UI Multiple Select，您可以 chop 选择后显示的值，而不是转到另一行(通过将 renderValue 设置为 .join selected 选
有人可以向我解释一下为什么不能将包含空格的字符串作为参数传递到 JavaScript 函数中吗？ 这是我的代码，显示了这个问题，只需将鼠标悬停在链接上，您就会看到只有“mario”显示为标题，而不是“
我在打印模块内容时遇到了问题，这发生在所有浏览器上。当我打印模态内容时，它只预览第一页，第一页之后的任何内容都会被切断。我已经尝试在 Chrome 打印模拟器中进行调试，但仍然无法找到解决方案。 在某
我正在尝试检测是否使用 JS chop 了文本。解决方案mentioned here除了下面的边缘情况外，效果很好。您会注意到，如果文本在视觉上被 chop ，则鼠标悬停的第一个 block 将返回
我制作的模态面临一个罕见的问题。我有一个iframe，可以在该模式下加载嵌入式youtube视频，它在为测试该视频而创建的单独HTML文件(空白)上运行良好。 当我尝试将其加载到实际网站的本地模板上时
我有一个 Javascript，它从两个 HTML 下拉列表中读取文本，删除所有特殊字符，然后将文本存储在变量中。下拉列表中的文本来自 JSON 文件。问题是，只要下拉列表中的文本有撇号，Javasc
在node和chrome中，下面的代码只给了我10个堆栈帧，而我期望的是100个。有什么方法可以打印整个堆栈吗？ function blowUp(n) { if(n > 100) {
所以我有一个对象数组，问题是返回的名称很长。我怎样才能让名字结果看起来像 returnedArray: [ {name:'reallyy..',age:'28',hobby:'blah'},{name
我遇到了一些字符串溢出其容器的问题。我当然可以使用溢出:隐藏，但它看起来不太好，因为我更喜欢文本溢出:省略号。然而，对此的跨平台支持充其量是不确定的，而且我发现的现有解决方案不允许字符串在包含空格时换
我正在编写 jQuery 应用程序，但遇到了障碍。 我需要我的双行描述简介能够在浏览器大小调整时随着文本回流而做出响应。下面的示例成功地收缩了字符串的大小，并在缩小浏览器时替换为省略号。但是当您扩大浏
当前版本: def chop(ar,size): p=len(ar)/size for i in xrange(p): yield ar[(i*size):((i+1)
My Codepen if("matchMedia" in window) { if(window.matchMedia("(max-width: 533px)").matches) {
我这里遇到了一些问题。 我基本上是在 div 中循环项目，以便每个项目都有一个可以使用的键，这样当单击图标时，就会出现一个编辑模式并填充所选项目的数据。 这可行，但我想为我的跨度添加功能 {{ $no
我有一个代码块，其中包含以下形式的行: 在接收端，我有一个像这样抓取数据的文档: $title = $_POST['title']; 这将被插入到数据库中，但任何包含撇号的“标题”都会在撇号处被
我是一名优秀的程序员,十分优秀！