- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试在网站上制作一个侧边栏,其中包含一个“面板”联系信息。问题是在较小的屏幕上,文本会溢出背景。
这是 CSS,其中 #navigation 是外部 div,内部 div 称为 .innerPanel HTML 跟随:
#navigation{
position: absolute;
left: 1.5625em;
top: 1.5625em;
bottom: 1.5625em;
display: block;
width: 12.5em;
background: navy;
border-right: 1px solid navy;
text-align: center;
background: #B6D2F0;
padding: 5px;
color: #4A4A49;
overflow: hidden;
}
#navigation .innerPanel{
min-height: 200px; /* supply current height here */
height: auto;
overflow: auto;
}
.titleHead{
display: block;
padding-top: 0.9em;
overflow: auto;
}
/* inverted corners for the links */
#navigation #links {
position: relative;
padding-top: 30px;
}
#navigation #links div div div h3{
border-top: 1px solid navy;
border-bottom: 1px solid navy;
color: navy;
padding: 0px;
margin: 0px;
margin-top: 1px;
line-height: 1.2em;
}
#navigation div div div div ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navigation div div div div ul li{
text-align: center;
}
#navigation div div div div ul li a{
display: block;
text-decoration: none;
font-weight: bold;
color: #B6D2F0;
padding: 0px;
padding-left: 0;
line-height: 2.5em;
background: navy;
border-bottom: #D8F4F2 1px dashed;
}
#navigation div div div div ul li a:hover{
display: block;
text-decoration: none;
font-weight: bold;
color: #D8F4F2;
background: #0000A2;
}
#navigation div div div div ul #last a{
border-bottom: 0px;
}
`
这是 HTML 片段。嵌套的 div
标签用于圆 Angular ,被客户端“否决”
<div id="navigation">
<div id="logo" class="box">
<div>
<div>
<div style="text-align: center;">
<img src="./images/pictures/cbk-logo-sm.gif" alt="Logo" />
</div>
</div>
</div>
</div>
<div id="links" class="box">
<div>
<div>
<div> <ul>
<li id="home">
<a href="index.php" title="Home">Home</a>
</li><li>
<a href="applications.php" title="Apply as a staff member or camper">Applications</a>
</li><li id="last">
<a href="about.php" title="About our directors, our grounds and our campers">About</a>
</li>
</ul><div class="innerPanel"><div class="innerMost"><h4 class="titleHead">
Contact Information</h4>
<h5 style="margin: 0.8em 0 0 0; padding: 0;">City Office (September-June)</h5>
<p style="font-size: 0.75em; margin: 0; padding: 0;">
<em>Phone:</em> 555-555-5555<br />
<em>Fax:</em> 555-555-5555<br />
<em>Email:</em> email@provider.com<br />
<em>Address:</em> 123 Main Avenue Somewhere, IL 11234
</p>
<h5 style="margin: 0.8em 0 0 0; padding: 0;">Camp (July & August)</h5>
<p style="font-size: 0.75em; margin: 0; padding: 0;">
<em>Phone:</em> 987-654-3210<br />
<em>Fax:</em> 123-456-1234<br />
<em>Email:</em> email@provider.com<br />
<em>Address:</em> 456 Centre Road, Nowhere, AL 67891
</p></div></div> </div>
</div>
</div>
</div>
</div>
我需要一个跨浏览器的解决方案来让 innerPanel
动态添加一个滚动条给自己,这样在较小的屏幕上,内容被剪裁但可以通过滚动访问...
最好,解决方案应该是纯 CSS。
有什么想法吗?
编辑:对于歧义,我深表歉意。我有一个侧边栏,名为 #navigation
。它包含 Logo 、菜单和联系信息。我希望联系信息在需要的地方滚动。
在 800x600 及以上的屏幕上,其他所有内容似乎都能正常显示。
编辑:就目前而言,innerPanel 是一个固定高度。我希望它尽可能增长,如果有足够的空间,则消除滚动条。请注意,CSS 中未提及的 HTML div 包含在 innerPanel
中。
最佳答案
我有点不清楚你在问什么,但在我看来你要么想要 overflow:auto
在 #navigation 元素上,要么 取决于你的内容和为什么它有一个固定的高度:
#navigation .innerPanel {
max-height: 200px; /* supply current height here */
height: auto;
overflow: auto;
}
在 IE6 中不工作
IE6 不支持 max-height
。
关于html - 如果外部 div 太小,内部 div 滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1848814/
如何指示 webpack 排除所有 d3 模块? // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
这是一个简单的循环,我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
问题+概述 下面是两个片段,其中包含最初隐藏的 div,然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
我有一个 HTML 页面和一个单独的 .js 文件,该文件包含在带有 的页面中标签。 这是我的 .js 文件: element = document.getElementById("test");
我在 linux 静态库项目中有 3 个文件,我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
我正在尝试将颜色背景更改为默认背景颜色,当我点击输入框外 我尝试使用“null”或“none”但没有用? window.addEventListener('click', outsideClick);
我正在编写一个应用程序,要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
在 android 中,不可移动(内部)的外部存储和内部存储有什么区别?我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据 谢谢 最佳答案 在许多较新的设备中,将不再有物理区别,
在 C++ 中,假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别? 实现A namespace Ada { extern "C" { int getN
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。 想象一下我们有这样的东西: Hello World 如果我们这样
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
我们正在使用 SVN 试水,并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块 模块一 模块二 模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务? 我在裸机上运行 Kubernetes。 谢谢 最佳答案 使用 nodePort 类型的服务,它会将您的服务绑定(bind)到所有节
是否有可能在 Controller 之外使用 generateUrl() 方法? 我尝试在带有 $this->get('router') 的自定义存储库类中使用它,但它没有用。 更新 我在这里找到了一
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止,我已经为 React 和其他小库实现了这一目标。 如果我只是移动 '@angular/compil
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项,或者得到了: 您不能更改处于未解析状态的
我是R包的创建者EnvStats . 有一个我经常使用的函数,叫做 stripChart .我刚开始学习ggplot2 ,并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack
我是一名优秀的程序员,十分优秀!