如何使用js或jquery继承html中的高度
在使用JavaScript或jQuery继承HTML元素的高度时，可以通过以下步骤实现：
- 首先，使用JavaScript或jQuery选择要继承高度的HTML元素。可以使用元素的ID、类名、标签名等选择器来选择元素。
- 通过JavaScript或jQuery获取被选择元素的高度值。可以使用
offsetHeight属性来获取元素的高度，或使用height()方法来获取元素的高度。 - 将获取到的高度值应用到需要继承高度的目标元素上。可以使用
offsetHeight属性或height()方法将高度值赋给目标元素。
下面是一个示例代码，展示如何使用jQuery继承HTML元素的高度：
<!DOCTYPE html>
<html>
<head>
<title>继承高度示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.source-element {
height: 200px;
background-color: lightblue;
}
.target-element {
background-color: lightgreen;
}
</style>
<script>
$(document).ready(function() {
// 选择源元素并获取高度
var sourceElement = $(".source-element");
var sourceHeight = sourceElement.height();
// 选择目标元素并将高度应用
var targetElement = $(".target-element");
targetElement.height(sourceHeight);
});
</script>
</head>
<body>
<div class="source-element"></div>
<div class="target-element"></div>
</body>
</html>在上述示例中，我们通过jQuery选择源元素（source-element）并获取其高度。然后，选择目标元素（target-element）并将源元素的高度应用到目标元素上，实现继承高度的效果。
请注意，本示例中使用的是jQuery库来简化操作，你可以通过引入jQuery库，并按照上述示例进行使用。
相关·内容
3回答
我在一个jQueryUI对话框中有一个jQueryUI自动完成。该对话框具有给定的高度(即200 be )，因此自动组合必须具有低于对话框的高度，以便显示滚动条。我通过将100 it高度硬编码到自动完成来实现它。不是硬编码这个高度，我如何使高度依赖于父母的高度？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title
浏览 4提问于2015-03-06得票数 0
回答已采纳
1回答
我正在使用最新的jquery版本。(1.9.1)
我有一个空的span元素：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body&g
浏览 0提问于2013-03-19得票数 3
回答已采纳
3回答
我正试图在jQuery中得到一个div的高度。这很简单：
$("#mydiv").css("height");
没错。但是，如果div的高度高于最小高度，则此代码将返回最小高度。我怎么能强迫它给我高度呢？
例子：
$("#result").html($("#mydiv").css("height"));
#mydiv{
width : 100px;
height : 10px;
min-height : 80px;
background : red;
}
<script src="
浏览 1提问于2018-12-06得票数 4
回答已采纳
2回答
遗憾的是，在下面的代码中，它不起作用--只有一小部分map在头部可见。也许有人能帮上忙？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title&
浏览 0提问于2013-05-19得票数 2
回答已采纳
我正在尝试使用手机在jQuery平台上构建一个PhoneGap/Cordova应用程序，并且正在生成的输出中有一些非常奇怪的行为。
在Eclipseand桌面web浏览器中，我的应用程序的预览看起来还可以，但是当我部署到设备上时，header和content div似乎被压缩到屏幕顶部的一个非常小的空间中，如下所示
我真的不知道为什么会发生这种情况，我在上问过，但是那里的回答都没有帮助，我想知道这是否是jQuery手机特有的问题？
复制步骤：
创建一个新项目
在下面粘贴的enter.html代码中复制
在下面粘贴的home.html代码中复制
调整css/js文件的位
浏览 0提问于2012-08-02得票数 0
回答已采纳
我有一个带有ng重复指令的div，它遍历一个数组并向我的容器中添加一堆div。当我在容器上调用.height()时，它返回0。它似乎在执行ng-重复指令之前返回高度。在将ng重复指令中的所有元素添加到DOM后，如何检索高度？
我有以下HTML、JS和CSS代码：
HTML：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
</head>
浏览 4提问于2014-08-03得票数 3
回答已采纳
很新的角度，并仍然试图把我的头围绕着一些事情。我需要在仪表板上得到多个项目的高度。我已经看到了这样的答案：，但是，我想不出如何让它对多个项目起作用。当然，我不需要为每个元素编写单独的指令。因此，使用这个，我将html更改为下面，但两个元素的值相同。
嗯
script.js：
angular.module('myModule', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
link: function
浏览 1提问于2016-03-24得票数 1
回答已采纳
我有这个问题，希望你有一些想法如何解决它。在不是基本模板的“子”模板的Django模板中，我想使用基本模板中的javascript模块，即Jquery。有没有办法不用重新加载我需要的所有javascript库就能做到这一点呢？
比方说base.html
{% block js %}
<script src="some/path/to/jquery.js"></script>
{% endblock $}
some_component_base_template.html
// Not inherited from base.html
{% bloc
浏览 5提问于2015-09-04得票数 1
谷歌搜索结果和jQuery文档表明，jQuery的height()和width()方法不会维护元素的比例。
然而，当我运行我的代码时，似乎确实保持了相称性。
有谁能纠正这一点吗？
下面是我的代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https:
浏览 2提问于2010-12-19得票数 2
回答已采纳
2回答
将引导背景应用于面板页脚
、、、、
面板页脚应该使用不同的背景颜色从引导3主题。我试过下面的代码，但是所有的页脚都是灰色的？如何使用面板页脚中类的背景颜色？
面板最初有固定的高度。应该可以将它们调整到零高度。
代码下面设置明-高度0到处。但是，忽略小于一行高度的调整大小。
如何允许将大小调整到零高度？
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnP
浏览 3提问于2016-01-06得票数 0
回答已采纳
我们使用流行的JQuery Datatables插件以及相应的插件。
我们的数据表包含一个滚动条。
IE8中出现了一个问题，当您尝试从底部向顶部拖动一行时，滚动条不会移动。这在Chrome和Firefox中运行良好，在IE中不会产生任何JS控制台错误。我对如何解决这个问题有点迷惑，所以我希望能有任何关于如何开始的建议？
下面是我的数据表设置：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %
浏览 1提问于2012-09-17得票数 0
回答已采纳
1回答
轨道没有显示。我做错了什么？注意:我没有更改任何文档结构。第5版
密码在头上：
<script src="js/vendor/modernizr.js"></script>
正文中的代码：
<div class="row">
<div class="orbit-container">
<ul data-orbit class="example-orbit orbit-slides-container">
<li> <img src
浏览 1提问于2014-02-11得票数 1
回答已采纳
2回答
在Django中，如何处理在实际使用JS文件之前需要等待加载JS文件的事实？
让我们看看这个例子的问题：
base.html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{% include "content.html" %}
<script src="jquery.js"></script>
<script src="awesome-script.js"></scri
浏览 4提问于2015-07-03得票数 4
回答已采纳
1回答
我有一个打开对话框的代码：
<p><a href="ShopItems/Rotax125MicroMax.html" data-rel="dialog" data-role="button">Rotax 125 Micro Max</a></p>
和一个页面，这是一个对话框：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
浏览 2提问于2013-08-05得票数 0
回答已采纳
只想知道如何将嵌套jQuery选项卡中父选项卡的子选项卡设置到左侧。谢谢你的帮助！
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>News Updates.</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"
浏览 0提问于2014-09-23得票数 0
回答已采纳
3回答
当菜单按钮被点击时，我试图将一个下拉菜单div的高度从0到250px动画。我试过使用jQuery。
这包含在我的HTML中：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="scripts.js">
浏览 2提问于2014-11-01得票数 0
我刚刚开始测试Bower ' Foundation -sites‘包中的Foundation 6，虽然我测试过的大多数基金会模块似乎都能工作，但我仍然无法触发离开画布菜单。
我尝试将jquery.js替换为jquery.min.js，尝试用cnd链接替换bower包，但没有效果，我在网络上复制了大量的代码示例，但我还没有完成这项工作。
这些是加载的脚本。
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_comp
浏览 2提问于2016-05-06得票数 0
回答已采纳
2回答
我希望jQuery的slideUp和slideDown方法能够在引导导航栏上顺利工作。但是当我测试它时，当slideUp方法被应用时，导航条只向上滑动了一小部分，然后立即消失了，同样的方法被应用到slideDown，只是相反的方向。为什么会发生这种情况，以及如何使动画顺利运行？
代码片段如下所示。
$('.slideUpBtn').click(function() {
$('nav').slideUp("slow");
});
$('.slideDownBtn').click(function() {
$('n
浏览 2提问于2016-04-03得票数 0
回答已采纳
2回答
我的滚动动画只有在页面向下移动到一半并调整屏幕宽度时才能正常工作。然后，skrollr动画全部重新启动，就好像中间现在是顶部一样。我必须刷新屏幕顶部的页面来修复它，否则动画将不会开始，直到我点击最后一个已知的“顶部”。
以下是我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<m
浏览 2提问于2015-09-05得票数 0
我想让div 30%的高度窗口，然后点击使它90%。问题是，我只被允许指定宽度的百分比，但随着高度，它打破，除非它的px。有什么想法吗？这里有一个链接：
下面是html：
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<
浏览 2提问于2015-09-10得票数 3
回答已采纳
我有这个代码，它工作得很好。
<html>
<header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja
浏览 0提问于2018-02-22得票数 0
回答已采纳
2回答
这是我第一次使用jQuery和Google。因此，我从字面上复制和粘贴了google world页面，并包含了jQuery移动，我只得到一个空页面，上面写着“加载”。我准备好了不知道为什么？
HTML和JS：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="
浏览 1提问于2014-01-14得票数 0
回答已采纳
我做了一个简单的游戏，可以让你通过按箭头键来移动一个紫色的方框。紫色的盒子在蓝色的边界内。我希望能够阻止紫色盒子突破蓝色边界并留在里面，我知道这涉及到碰撞，但我似乎不明白如何做到这一点。以下是我到目前为止编写的代码：
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:pink;
}
#bob
{
width:400
浏览 2提问于2012-11-17得票数 1
回答已采纳
当我调整浏览器窗口的大小时，我的所有图像都会移动 我得到的：https://i.imgur.com/x2hqPM3.jpg 我尝试使用相对、绝对和使用JavaScript代码来调整图像大小 HTML： <!doctype html>
<html><head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR
浏览 17提问于2019-07-04得票数 0
回答已采纳
我正在测试responsiveiframes.js以使iframe响应，iframe内部的竞赛没有响应。
我怎样才能让它有反应？iframe中的内容必须响应吗？是否还有其他选项可以使iframe响应(jquery或其他什么)？
非常感谢。
这是我的密码
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" l
浏览 3提问于2016-02-26得票数 0
回答已采纳
viewbox属性是如何在没有viewport的情况下工作的(比如提到了高度和宽度)，在这种情况下，它采用了所有可用的宽度，但我不明白为什么？
<link rel="stylesheet" type="text/css" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
</head>
<body>
浏览 2提问于2016-03-15得票数 0
1回答
刚刚开始使用jQuery插件。大多数示例(通过youtube、博客等)显示脚本被直接插入到html文档中(参见下面的代码作为示例)。这是最好的方法吗？看起来把所有的东西都分开是最好的方法。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.letterin
浏览 0提问于2014-10-05得票数 0
1回答
我需要一个有自动高度的iframe (没有垂直滚动，它应该占用它需要的所有空间，并滚动主页面只是很好)。
目前的代码中没有这样的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap IFrame Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initi
浏览 2提问于2016-01-11得票数 0
1回答
我目前正在一个聊天网站上工作，在使用聊天显示时遇到了一个奇怪的问题。现在，我有一个div，jQuery会动态地向其中添加聊天行。我想让div的高度达到100%，这样我就可以根据用户的配置来调整它的大小，但是当我这样做的时候，div就会扩展而不是滚动。
我做了很多研究，但没有运气。例如，我尝试在我的CSS中强制overflow-y: scroll，将max-height设置为100%，但仍然没有成功。然而，我注意到的有趣的事情是，这个问题似乎并不发生在Chrome中，而是在Firefox 31.0和IE11中重现。
下面是我的HTML (修改后只显示相关部分)：
<html height=
浏览 3提问于2014-07-31得票数 2
如何设置此页面的样式，以便包含幻灯片的div的高度等于幻灯片中图像的高度？
<html>
<style>
img {width:100%;}
</style>
<h1>Screenshots</h1>
<div id="slide" style="position: relative;">
<img src="https://multibit.org/images/en/screenshots/help-contents.png" >
浏览 3提问于2014-04-25得票数 0
回答已采纳
1回答
CSS视差效应高度到50%
、、、、
我目前使用的视差效果，这是整个背景的头版。我的问题是我想把高度设定在50%左右。但这不管用。
代码：
<header class="parallax-window" data-parallax="scroll" data-image-src="img/picture.jpg" alt="test">
.parallax-window {
position: relative;
overflow: hidden;
width: 100%;
height: 50%; //Not working.. wh
浏览 0提问于2018-02-22得票数 0
1回答
我希望iFrame占80%的高度和广告有剩余的20%。
代码
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe id="iframe" src="xxxxxx" style="border:0; width:100%;"></iframe>
<script async src="//pagead2.googlesyndicati
浏览 0提问于2016-07-05得票数 0
我正在尝试使用jQuery.matchHeight将元素设置为相同的高度。我从Angular指令调用函数
angular.module('myApp')
.directive('matchHeight', ['$timeout', function ($timeout) {
var linkFunction = function(scope, element) {
$timeout(function() {
angular.element(element).matchHeight();
});
浏览 5提问于2016-10-20得票数 0
我无法解决这个问题，我的图像总是在PDF文件中被切断。PDF大小似乎是正确的，但我不能看到我的整个页面作为一个图像。我已经努力了几个小时，但没有成功。
代码：
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https:/
浏览 1提问于2021-02-03得票数 0
我试图调整网页到facebook选项卡，我为选项卡创建了新的页面，并从目标网页加载内容，所有的问题是，我不能调整这个内容的大小，以适应810 re。
HTML:
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript
浏览 8提问于2013-12-25得票数 2
我正在使用jQuery thickbox插件来显示我的一个页面，它被包裹在一个厚框中。它工作得很好。
这就是我调用要在厚框中显示的页面的方式。
<a href="thickbox_page.html?KeepThis=true&TB_iframe=true" class="thickbox" id="thickbox_link">Thickbox example</a>
我已经在thickbox.js文件中设置了高度和宽度参数。同样，我也可以在js文件中设置其他参数吗？例如，我可以在js文件中设置TB_ifram
浏览 1提问于2011-04-28得票数 0
我正在创建一个界面，我无法弄清楚为什么左边显示的名字之间有巨大的差距。
我没有为任何html元素设置任何类型的填充或空白。我需要三个块显示在指定的高度内，并且不超过它的内容。我做错了什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
浏览 1提问于2015-10-31得票数 1
回答已采纳
我一直在怀疑。我认为谷歌是聪明的。但是，当我为开发人员站点复制jquery链接时，下面的jquery链接
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
样本码
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script&g
浏览 1提问于2014-01-11得票数 0
回答已采纳
1回答
我正在使用Ubuntu14.04的nginx主机
我的配置文件：
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
root /usr/share/nginx/html;
index index.php index.html index.htm;
# Make site accessible from http://localhost/
server_name testing.com;
location /site/admin
浏览 6提问于2016-08-25得票数 2
回答已采纳
我在这里遵循了一个教程：
它展示了如何使用缓动在单个网页上从另一个部分/div滚动。
代码如下：
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>
<
浏览 0提问于2013-02-12得票数 0
回答已采纳
当我需要捕获放置在html主体上的控件时，html2canvas库的行为很奇怪，该控件的长度超过30000像素。我的控件很小(100x100)--但是脚本在身体长的时候不能工作。
这里有两个小提琴，一个在工作，另一个不工作，不同的身体尺寸
$(document).ready(function() {
$('#test').on('click', function() {
html2canvas(document.getElementById('container'), {
onrendered:
浏览 4提问于2016-05-30得票数 4
回答已采纳
1回答
我正在通过模板动态创建<section>，使用Backbone.js、underscore.js、jQuery、.CSS和HTML。
我想要做的是，每当用户输入值或使用滑块时，信息就会用backbone.js存储，然后加载下面的模板。<section>将以指定的高度创建。也就是说，不管内容如何，我需要假设每个<section>都有不同的高度。
这是模板：
<script type="text/template" id="section-template">
<section class=
浏览 3提问于2016-02-18得票数 0
回答已采纳
我希望将像这个这样的webix表包含到sphinx文档中。
我发现这个指令：
.. raw::
:file: data.html
不幸的是，它不能工作，因为head应该包含在<head>中。另外，相关链接应该根据斯芬克斯生成的html更新。
<head>
<title>"Find" API</title>
<link rel="stylesheet" href="webix.css" type="text/css" charset="utf-8&
浏览 0提问于2016-06-02得票数 0
回答已采纳
我有一个简单的页面布局，有两个divs-一个在顶部，一个在底部。底部的div是我想要加载Google地图的地方。我希望地图填充底部div，并在窗口调整大小时自动调整大小。
我也有一些调整div高度的脚本。它工作得很好，但出于某种原因，我必须从整体高度中减去29个“神秘像素”，才能使一切正常工作。
知道这些神秘的像素是从哪里来的吗？我使用了Chrome的DOM检查器，但找不到任何线索。
下面是页面上的HTML：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
浏览 3提问于2012-03-27得票数 1
回答已采纳
4回答
我试图编辑 JQuery代码以使用PHP，但由于某种原因，javascript没有正常工作。
这是javascript:
function sel(x){
$(this).stop().animate({height:x},{queue:false, duration:600, easing: 'easeOutBounce'})
}
function desel(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBou
浏览 5提问于2010-08-26得票数 0
回答已采纳
3回答
我试图用Jquery将一个外部网页加载到div (#siteloader)中，但我想不出如何调整div的高度，以便在不获得滚动条的情况下重新调整大小以适应外部网站的内容。我绝对不想使用iframe。
代码如下：
<!doctype html>
<html>
<meta charset="utf-8">
<title>Load remote content into object element</title>
<style type="text/css">
浏览 1提问于2012-10-06得票数 1
1回答
当我试图展示一个iframe时，我遇到了一个问题。事情是这样的:首先，我在html5中加载一个视频，然后当视频完成后，用jquery隐藏视频并显示iframe (这是神秘的)，但是由于某种原因，当视频隐藏时，iframe没有出现，当我检查元素时，标记在那里，但在src空中出现。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8">
jQuer
浏览 2提问于2012-09-10得票数 0
回答已采纳
我有我能想到的最裸露的bxslider模板，我有一个bug，当点击向右箭头时，第二张幻灯片被跳过。这个bug发生在Chrome + Firefox中。我使用的是可用的最新版本。您将注意到，当点击下一个箭头时，会显示"3“。
我必须做一些根本错误的事情，但我不能弄清楚。
这是一个现场演示：
代码：
<!doctype html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<script src="jquery.
浏览 0提问于2014-02-20得票数 0
1回答
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0p
浏览 0提问于2015-09-21得票数 0
回答已采纳
在下面的_Layout页面中，ASP.NET Core 1.1应用程序在VS2015中滚动时，只有以下部分保持在顶部：
正确地停留在顶部
<div class="container navbar navbar-inverse navbar-fixed-top text-center">
<img src="~/images/CompLogo.gif">
</div>
，但是当滚动时，下面的部分不会停留在顶部
<div class="container nav nav-pills" >
浏览 2提问于2017-04-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
