- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个显示 Logo 、链接等的顶部固定 Pane ,这些 Pane 在滚动时应保持可见。
我读了this other post关于如何做到这一点,其中一个回复显示了这段代码:http://jsfiddle.net/ukzYf/1/
此 Pane 有一些 css 按钮位于单行中(不在表格中),在调整窗口大小时可以很好地堆叠。
主要问题是,由于卡住 Pane 的高度以像素为单位,因此无论何时调整窗口大小时,堆叠的按钮都会部分覆盖文本。
参见此处:http://jsfiddle.net/tpvLeLL7/2/
.fixed {
position: fixed;
}
.header {
top: 0;
left: 0;
right: 0;
height: 200px;
background-color: #000;
z-index: 1;
}
.scrollable {
width: 100%;
margin: 205px 0 0 0;
}
.button {
position: static;
border-radius: 4px;
width: 200px;
padding: 5px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 15px;
-webkit-transition-duration: 0.2s;
/* Safari */
transition-duration: 0.2s;
cursor: pointer;
color: black;
border: 2px solid #555555;
background-color: #555555;
color: white;
}
.button:hover {
background-color: white;
color: black;
border: 2px solid #555555;
}
<div class='fixed header'>
<h1 style="color:white;font-size:300%;text-align:center;margin-top:20px;">Fancy Title</h1>
<div align="center">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
</div>
</div>
<div class='scrollable'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet
vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper
sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis
quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est. Vivamus fermentum semper porta. Nunc diam
velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu
ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar
tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices
ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui. Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus
porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus.
Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend
nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum
magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo
nisi consequat massa, sed vulputate quam urna quis eros. Donec vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec
et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in
urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
facilisis semper ac in est. Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id
fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam,
elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus
ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui. Suspendisse
lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt.
Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris
ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum
sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse
id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</div>
有没有办法让 Pane 有点动态?我宁愿这样做而不是强制按钮保持固定,但如果拳头不可能,后者就可以了。尽管我也需要帮助。
谢谢。
最佳答案
您可以使用媒体查询来更改标题的高度。
header{
height:250px;
}
@media only screen and (min-width: 480px) {
header{
height:200px;
}
}
@media only screen and (min-width: 720px) {
header{
height:150px;
}
}
关于html - 通过 CSS 卡住 Pane : issue when resizing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37588342/
我有一个 View ,不是窗口的大小,也不是窗口本身,当它调整大小时,我想比较调整大小的开始值和结束值。然而,JQ-UI 的 resize ui 对象只包含以前的状态,而不是原始状态,所以它只是按像素
我有一个简单的可调整大小 jQueryUI 元素。 element.resizable({ start: function(event, ui) {...}, resize: func
我有几个嵌套的可调整大小的 div,需要调整大小以适应子大小。一切正常,直到我尝试调整其中一个外部 div 的大小(垂直)然后它卡住了。 这是一个 fiddle . $(function () { $
CNN 模型将大小为 (112x112) 的图像张量作为输入,并给出 (1x512) 大小的张量作为输出。 使用 Opencv 函数 cv2.resize() 或在 pytorch 中使用 Trans
经过大量搜索和研究,我找不到任何答案。 我将非常感谢可以帮助我的人。 在 SWT Java 中, 我希望我的窗口不能调整大小,所以我这样定义它: shell = new Shell(SWT.CLOSE
$(window).bind('resize') 和 $(window).resize() 有什么区别? 我看到bind嵌套在resize之上。它有什么影响?请参阅下面的代码。 我知道.resize(
使用 Vaadin 14.1.19 和 Vaadin“我的入门元素”元素,我尝试创建一个多行 TextArea。乍一看它工作正常,但是当调整 TextArea 大小时,它不会调整行数。这是我的代码:
我有一个使用 Ext.js 的侧面板。在浏览器调整大小之前,侧面板中的其中一个面板很好。浏览器调整大小时,它会切断面板的组件。 如何在浏览器调整大小时调整面板大小? { xtype:
我需要一种可靠的方法来检测 $(window).on('resize') 是否已由用户交互或 jQuery .trigger 调用触发。 我尝试了以下方法,但我似乎没有在函数调用中取回参数: $(wi
我有一个可调整大小的 div,现在我想在调整此框大小/用户完成调整大小时编辑 cookie。 (我有cookie插件) 我该怎么做? PS:我有多个具有不同 id 的 .div。 我的代码不起作用
这些游标类型有什么区别?我在 Chrome/windows 中看到了所有 3 个相同的光标 .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-r
我使用了一个指令,它调用了一个返回一些值的方法,该方法运行良好。但我的问题是它反复调用它,而我想要的是它应该只在调整大小完成时调用该方法。我采取了这种代码形式 https://codepen.io/f
为了检查这种意外行为,我只是将 TextArea 直接放入 PrimaryStage 包含的 Scene 中:在应用程序启动时,TextArea 完全适合窗口(正如预期的那样)。 但是如果我移动窗口的
我在我的项目中使用 jquery-ui-resizable 插件。 默认情况下,当您制作 DOM 对象 jquery-ui-resizable 时,可调整大小的句柄将出现在右下角,我需要在左下角显示可
我正在 MonoTouch 中使用来自 AV Foundation 的 AVPlayer API 开发视频播放器(但 objective-c 中的解决方案也可能不错)。我正在尝试实现全屏模式。 为了显
我只是想让我的响应式 div 示例像这里一样工作 http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-o
我正在制作一个包含一个 .html 文件和一个 .css 文件的页面。 我已将 bootstrap 4 CDN 合并到我的 html 头中。 网格在中等屏幕尺寸下显示正确,但在我的手机上查看时它没有调
所以我有一个最近出现的非常具体的问题(就在我们计划的明天发布日之前),我不确定如何解决它。我用我有限的前端技能构建了我们的 HTML 模板网站,我们对此非常满意。但是,我似乎无法解决这个问题。 问题:
据我了解,有类instance.method(parameters)=class.method(instance,parameters),所以只是记法上的区别。但是 np.resize(ndarray
window.resize() 和 window.on('resize' , function()) 有什么区别在 jquery 中? 最佳答案 来自 jQuery页面.resize(): This
我是一名优秀的程序员,十分优秀!