html - 使元素位置固定，而 width = 100% 保持有效-6ren

html - 使元素位置固定，而 width = 100% 保持有效

转载作者：太空宇宙更新时间：2023-11-04 03:12:22

25

4

我目前在使用 html 和 css 时遇到了问题(仍在学习两者)。我正在尝试使用固定在页面顶部的 div 中的图像制作标准布局，在其下方有水平导航栏、页脚和中间的新闻模块。

这是它目前的样子:

http://pokit.org/get/?05aadb16da601f1aa68bc3321e891107.jpg

您已经可以看出问题所在(实际上是 2 个)。我无法将列表放在导航栏图像上，也无法使页脚图像与导航图像一样宽。

这是我的 html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel = "stylesheet" href = "/servis/Stilovi/standardstyle.css">
        <title>Granulo - RE d.o.o</title>
    </head>

    <body>
        <!-- Element koji cini header -->
        <div id = "headers">
            <img id="aparat_slika" src="/servis/Resursi/Slike/aparat_slika.png" alt="Slika nije ucitana">
            <img id="logo_slika" src="/servis/Resursi/Slike/granulo_logo.png" alt="Slika nije ucitana">
            <p id="naziv_firme">GRANULO - RE d.o.o</p>
            <p id="djelatnost_firme" class="djelatnost">Promet, inženjering i servis protivpožarnih uređaja<br>Bojnička 47, Sarajevo</p>
        </div>
        <!-- Element koji cini vertikalni meni -->
        <nav id = "navbar">
            <ul id="lista_meni">
                <li ><a class="djelatnost" href="#">Link 1</a></li>
                <li ><a class="djelatnost" href="#">Link 2</a></li>
                <li ><a class="djelatnost" href="#">Link 3</a></li>
                <li ><a class="djelatnost" href="#">Link 4</a></li>
                <li ><a class="djelatnost" href="#">Link 5</a></li>
            </ul>
            <img id="navbar_bg" src="/servis/Resursi/Slike/horizontal_stripe.png" alt="Slika nije ucitana">
        </nav>
        <!-- Element u kojem se nalaze novosti -->
        <div id = "news"></div>
        <!-- Element koji cini footer -->
        <div id = "footers">
            <img id="footer_image" src="/servis/Resursi/slike/horizontal_stripe.png" alt="Slika nije ucitana">
        </div>
    </body>


</html>

还有我的CSS:

@import url(http://fonts.googleapis.com/css?family=Roboto:700);
body{
    margin-left: 10%;
    margin-right: 10%;
    background-color: white;
}

ul{
    list-style-type: none;
}

/* images */
#aparat_slika{
    float:right;
}

#logo_slika{
    float:left;
}

#navbar_bg{
    width: 100%;
    margin: 0;
    padding: 0;
}

#footer_image{
    width: 100%;
}

/* div style */
#headers{
    background-color: #e6e1e1;
    width: 100%;
    float: right;
    border: 1px solid black;
}

#naziv_firme{
    font-family: 'Roboto', bold;
    font-size: 30pt;
    float: top;
    margin-top: 10px;
}

#navbar{
    width: 100%;
    border: solid 1px black;
    float: right;
    padding: 0;
    text-align: center;
}

#navbar ul{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar ul li{
    margin: 0;
    padding: 50px;
    display: inline;
}
#navbar  a:visited{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
}

#navbar ul a:active{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
}

#navbar ul a:hover{
    margin: 0;
    padding: .3em .4em .3em .4em;
    text-decoration: none;
    font-weight: bold;
    font-size: medium;
    background-color: #227755;
}

#footers{
    position: fixed;
    bottom: 0;
    width: 100%;
    border: solid 1px black;
}

#news{
    border:solid 1px black;
}

/* Klasa za male natpise za firme */
.djelatnost{
    font-family: 'Roboto', italic;
    font-size: 10pt;
    float:top;
    margin-top: -40px;
    color: black;
}

.linkSize{
    height: 120px;
}

最佳答案

首先，我建议将您的代码包装在包装器内，而不是为您的实际主体留出余量，就像这样

<div class="container">
    <div id = "headers">...</div>
    <nav id = "navbar">...</div>
    <div id = "news">...</div>
    <div id = "footers">...</div>
</div>

CSS

body{
    background-color: white;
}
.container{
    width:1000px;
    margin: 0 auto;
}

第 2 个页脚是 position:fixed;所以它不会服从任何容器宽度，在这种情况下它不会服从 margin-right:10%; body ，你可以用这样的小技巧来修复它:

#footers {
    position: fixed;
    bottom: 0;
    left: 50%; /* tells your footer to be horizontally centered */
    margin-left: -502px; /* This need to be half of the width (+2px because of the 1px added as a border for both left and right site in this case) */
    width: 1000px;
    border: solid 1px black;
}

最后，为了使您的导航栏/链接位于标题图片上方，请添加 position: absolute;上课.navbar

这是一个 online example 。正如你所说，我没有将它包含在标题图片的链接中，但是position: absolute;是做到这一点的方法，您只需要尝试一下即可。
解决.navbar的问题因为这个新的 position:absolute; 而离开容器包装 .navbar在一个新的 div 中，甚至更好地将属于您的标题的所有内容包装在一个新的 div 类中，并向这个新类添加标签 position: relative;

关于html - 使元素位置固定，而 width = 100% 保持有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29319751/

25

4

0

文章推荐： css - 如何在 HTML 中并排放置两个或多个图像？

文章推荐： python - 使用 subprocess.Popen() 从 bash shell 转换为 python3

文章推荐： python - flask登录中如何实现localize_callback

文章推荐： HTML 表头不显示，如何修复？

html - max-width of 100px 和 width of 100px ，为什么 max-width 比 width 短？
我想了解这两者的区别谢谢最大宽度:100px 宽度:100px body{ max-width: 1080px; width: 1080px; backgrou
javascript - jQuery .width()、style.width 和 jQuery .css ('width' 之间有什么区别？
jQuery 的 .width()、jQuery 的 .css('width') 和 .style 返回的值有什么区别.width 节点上的属性？我很好奇，因为在尝试将两个表格单元格的宽度设置为相等
php - 可以使用 width=device-width 和元名称 ="viewport"内容 ="width=1024"吗？
我可以在 wordpress 的 header php 中添加两个视口(viewport): 和我希望能够使用 viewport width 1024 显示everything，除非您是低于 x
reactjs - 无法读取未定义的属性 'width' (style.width)
好的，所以我得到了 ImageBackground 的以下组件(使用 typescript ，但应该是不言自明的)。 (这是 react 原生的) import * as React from "re
javascript - .offsetWidth、.width、.width() 等并不总是在自动调整大小的元素上正确返回
我正在尝试根据 div 中包含的图像的宽度调整其大小，但没有任何 JS 方法可以一致地工作来获取图像的宽度。 label here img { width: auto
jquery - .width() 给出错误 $(...)[0].width 不是函数？
我有一个表，我试图找到表中每个 td 的宽度。我尝试了各种变体:$("td")[0].width()，但它们都不起作用，收到错误:"Uncaught TypeError: $ (...)[0].wid
html - min-width 和 width 并存
我在使 rem 中的 min-width 与百分比宽度共存时遇到了一些问题。 When resizing this jsfiddle the outer right block is going un
css - 有没有办法让浏览器在设备模式下减少 "width"以及 "device-width"
当我在 chrome(以及 Edge/Brave/Opera)的设备模式下测试页面时，设备宽度属性似乎减少了，但宽度属性没有重新创建: html {
html - 依次放置几个div width full width 并调整图像背景的宽度和高度
我想依次显示 div #botone、#bottwo 和 #bottree。我还希望在 #botone div 上按 100% 宽度和比例高度调整背景图像。现在最后两个 Div 显示在 #boton
javascript - width 和 style.width 接受什么数据类型？
我是第一次学习 JavaScript 的学生，我有一个学校问题，我们需要指出 width 和 style.width 接受的数据类型。我知道数据类型有数字、字符串、空值、未定义、 bool 值和对象
html - Screen.width/$(window).width() 媒体查询
所以看起来在移动设备中媒体查询使用 screen.width 根本没有改变。但是在我的桌面上，当我更改窗口大小时，screen.width 保持不变，$(window).width() 发生变化，并且
javascript - Jquery width $(el).width() 似乎在这里失败
http://jsfiddle.net/3BFGU/27/ 有谁知道为什么包含文本“ABC”的跨度的宽度返回 0。 1) 仅在 Firefox 中发生。2)如果我删除两者之间的跨度，它工作正常。 (h
javascript - canvas.width=canvas.width 在内部是如何工作的？
我知道下面的代码清除了 Canvas canvas.width = canvas.width 但这在内部是如何工作的呢？赋值运算符只是将一些值赋给变量，但是上面的代码如何清除 Canvas ？根据
html - max-width 不打断单个单词，超过max-width
当使用 max-width 时，为什么它不会“破坏”超过允许长度的单词，我该如何让它工作？ JSFiddle function input() { var inputText = document
html - 在移动设备上， 'width=device-width' 字体大小的最佳实践？
在移动网站上，在利用 width=device-width 视口(viewport)设置的同时调整文本大小的最佳方式是什么？最佳答案样式百分比如何？比如 100% 或 90%。关于html -
WPF 工具包数据网格 : how to get ColumnHeader width to be the same as GridColumn width
对于我的 WPF Toolkit DataGrid，我使用以下自定义列标题样式:
css - min-width 和 max-width 具有相同的值？
过去，我看到下一个 css，我在想两者之间是否存在一些实际差异 min-width: 90px; max-width: 90px; 和 width: 90px; 最佳答案使用 width 将简单地在
r - Knitr 忽略 width 和 out.width 选项
我有一个 R Markdown，我从 RStudio 中将其编织为 html。我可以使用 fig.width 和 fig.height 来调整我的绘图的分辨率，但我似乎无法加宽页面输出，以便文本输出不
jquery-mobile - 水平滚动失败，width=device-width iscroll
此处的示例代码:http://pastebin.com/95z3pftQ 我正在尝试构建一个带有固定标题和“内容”部分的移动页面，该部分将填充外部(经过清理，但在其他方面是任意的)HTML。我需要使用
安卓 : is a width of 160dp equals to 100% of the screen width?
这里是 dp 单位的定义:(如果它是正确的...) 密度无关像素 - 一种基于屏幕物理密度的抽象单位。这些单位是相对于 160 dpi 屏幕而言的，因此 1 dp 是 160 dpi 屏幕上的一个像素

首页

博学

6Ren·AI

商城

html - 使元素位置固定，而 width = 100% 保持有效