小编Rus*_*pez的帖子

CSS HTML - DIV高度填充剩余空间

所以我有这样的布局:

div {
  border: 1px solid
}
Run Code Online (Sandbox Code Playgroud)
<div id="col_1" style="float:left;width:150px;">1</div>
<div id="col_2" style="float:left;width:100px;">2</div>
<div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>
Run Code Online (Sandbox Code Playgroud)

col_1和col_2占用固定的空间.我希望第三列能够占用其余部分.完成此任务的最佳方法是什么?

html javascript css jquery css3

20
推荐指数
2
解决办法
3万
查看次数

Div扩展到视觉填充垂直空间

我有一个页眉,内容和页脚.页眉和页脚具有固定的高度,我希望内容调整其高度,以便它在页眉和页脚之间动态匹配.我打算在我的内容中加入背景图像,因此它实际上填满了剩余的未占用垂直空间是至关重要的.

我使用Sticky Footer方法确保页脚保留在页面底部.然而,这不会使内容跨越剩余空间的整个高度.

我尝试了几个涉及我添加的解决方案,height:100%, height:auto; position:relative但它没有用.

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#wrapper #content {
  background-color: pink;
  width: 400px;
  height: …
Run Code Online (Sandbox Code Playgroud)

html css

18
推荐指数
4
解决办法
5万
查看次数

仅水平webkit滚动条样式css

这是css中的自定义滚动条

 /* Gmail style scrollbar */
 ::-webkit-scrollbar {
   width: 12px
 }
 ::-webkit-scrollbar-thumb {
   border-width: 1px 1px 1px 2px
 }
 ::-webkit-scrollbar-track {
   border-width: 0
 }
 ::-webkit-scrollbar {
   height: 16px;
   overflow: visible;
   width: 16px;
 }
 ::-webkit-scrollbar-button {
   height: 0;
   width: 0;
 }
 ::-webkit-scrollbar-track {
   background-clip: padding-box;
   border: solid transparent;
   border-width: 0 0 0 4px;
 }
 ::-webkit-scrollbar-track:horizontal {
   border-width: 4px 0 0
 }
 ::-webkit-scrollbar-track:hover {
   background-color: rgba(220, 172, 0, .05);
   box-shadow: inset 1px 0 0 rgba(220, 172, 0, .1);
 }
 ::-webkit-scrollbar-track:horizontal:hover {
   box-shadow: …
Run Code Online (Sandbox Code Playgroud)

css jquery webkit css3

17
推荐指数
2
解决办法
2万
查看次数

Maven编译器插件空指针

我在通过终端运行测试时遇到问题。我需要运行 mvn install,但我得到:

[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.7.0:compile (default-compile) on project ProjectName: Fatal error compiling: CompilerException: NullPointerException -> [Help 1]
org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.7.0:compile (default-compile) on project ProjectName: Fatal error compiling
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:213)
at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:154)
at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:146)
at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:117)
at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:81)
at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build (SingleThreadedBuilder.java:56)
at org.apache.maven.lifecycle.internal.LifecycleStarter.execute (LifecycleStarter.java:128)
at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:305)
at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:192)
at org.apache.maven.DefaultMaven.execute (DefaultMaven.java:105)
at org.apache.maven.cli.MavenCli.execute (MavenCli.java:956)
at org.apache.maven.cli.MavenCli.doMain (MavenCli.java:290)
at org.apache.maven.cli.MavenCli.main (MavenCli.java:194)
at jdk.internal.reflect.NativeMethodAccessorImpl.invoke0 (Native Method)
at jdk.internal.reflect.NativeMethodAccessorImpl.invoke (NativeMethodAccessorImpl.java:62) …
Run Code Online (Sandbox Code Playgroud)

java maven

17
推荐指数
3
解决办法
1万
查看次数

如何居中水平表格单元格

我希望Content A,Content B和Content C列水平居中.我有这个代码试图添加

http://jsfiddle.net/hsX5q/24/

HTML:margin:0 auto to .columns-container,它不起作用.有人可以帮忙吗?

/*************************
 * Sticky footer hack
 * Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
 ************************/

/* Stretching all container's parents to full height */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* Setting the container to be a table with maximum width and height */

#container {
  display: table;
  height: 100%;
  width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */

.section {
  display: table-row;
  height: 1px;
} …
Run Code Online (Sandbox Code Playgroud)

html css

16
推荐指数
2
解决办法
8万
查看次数

如何通过javascript /自动保存HTML5搜索输入而不刷新

问题:
有没有办法从javascript触发Webkit的自动保存功能?如果不通过专用API,至少有一种方法可以通过操作cookie来实现相同的功能吗?

背景:
我非常喜欢HTML5中新的"搜索"输入类型,并希望为我的Webkit用户提供轻松调用过去搜索的好处,而无需在我的数据库中存储所有这些搜索的开销(使用自动保存功能).

我遇到的问题是,如果搜索输入封装在表单中,并且该表单在提交时执行标准POST,则搜索条件似乎只会被保存.由于我的搜索输入用于过滤已经存在的结果,因此完全重新加载页面没有多大的逻辑意义,因此我使用AJAX来重新填充结果.如果我在我的AJAX函数中返回false,那么界面都是干净且一致的,但是这显然不会触发表格POST [按设计],因此浏览器(至少Chrome)不会保存搜索词.返回true会刷新整个页面,销毁我注入AJAX的内容和过滤器的整个点,但会保存搜索词.

$('#filter-form').submit(function(e) {
      var term = $('#filter').val();
      $.ajax({
        async: true,
        type: 'POST',
        url: '/Home/GetResults',
        data: {
          filter: term
        },
        success: function(returnData) {
          $('#result-list').html(returnData);
        }
      });
      return false;
    }
Run Code Online (Sandbox Code Playgroud)
<form id="filter-form" name="filter-form" action="#">
  <input type="search" name="filter" id="filter" results="5" autosave="EluminitePreviousFilters" />
</form>
<div id="result-list"></div>
Run Code Online (Sandbox Code Playgroud)

html javascript ajax html5

15
推荐指数
1
解决办法
1566
查看次数

-webkit-font-smoothing属性在Chrome中无效

我正在尝试使用-webkit-font-smoothingCSS属性控制谷歌浏览器(可怕的)字体抗锯齿,但它对文本完全没有影响.

<div style="font-size: 42px">
  <p style="-webkit-font-smoothing: subpixel-antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: none">This is a font test.</p>
</div>
Run Code Online (Sandbox Code Playgroud)

我比较了Photoshop中的像素,三者完全相同.Chrome不再支持此属性了吗?

css fonts google-chrome

11
推荐指数
1
解决办法
3万
查看次数

如何将内容DIV放在bootstrap轮播上并使其响应?

我想DIV在大型和桌面屏幕上放置一个关于bootstrap轮播的内容.请参阅下图以了解您的情况.

屏幕上的示例

在移动和标签屏幕中应该是这样的 -

手机上的示例

我不知道如何使用bootstrap 3创建这个布局.希望有人可以帮助我.

这是我目前的Mark Up:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">

  <div id="homepage-feature" class="carousel slide">
    <ol class="carousel-indicators">
      <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
      <li data-target="#homepage-feature" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: cover;">
        <div class="container">
          <div class="carousel-caption">
            <h3>Providing you the Best</h3>
            <h1>Cleaning Companies</h1>
            <p>in Bahrain with 10% Discount.</p>
          </div>
        </div>
      </div>
      <div class="item" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

11
推荐指数
1
解决办法
5万
查看次数

如何使用Dojo的dijit.form.Form提交帖子数据?

我用javascript的工具包dojo将这个简单的表单转换为HTML元素形式:

dojo.require("dijit.form.Form");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.Button");

dojo.addOnLoad(function() {
  var form = new dijit.form.Form({
    method: "POST",
    action: ""
  }, "createCollectionForm");
  var title = new dijit.form.ValidationTextBox({
    required: true,
    trim: true
  }, "title");
  var description = new dijit.form.Textarea({
    trim: true
  }, "description");
  var submit = new dijit.form.Button({
    label: "OK",
    onClick: function(event) {
      dijit.byId("createCollectionForm").submit();
    }
  }, "submit");
});
Run Code Online (Sandbox Code Playgroud)
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<form method="post" action="" enctype="application/x-www-form-urlencoded" id="createCollectionForm">
  <dl class="zend_form">
    <dt id="title-label"><label class="required" for="title">Title:</label></dt>
    <dd id="title-element">
      <input …
Run Code Online (Sandbox Code Playgroud)

html javascript dojo

9
推荐指数
1
解决办法
9750
查看次数

如何引用仅映射到JPQL中的连接的列?

假设我有以下两个表:

@Entity public class Foo {
   @Id private int id;
   @ManyToOne()
   @JoinColumn(name = "bar_id")
   private Bar bar;
}
@Entity public class Bar {
   @Id private int id;
   private Boolean flag;
}
Run Code Online (Sandbox Code Playgroud)

我想写一个JPQL查询,Bar.flag根据一组Fooid 改变一些值.

如果这是普通的SQL我会写这样的东西:

UPDATE Bar SET flag = true WHERE id IN (SELECT bar_id from FOO where id = 3);
Run Code Online (Sandbox Code Playgroud)

但是,您无法将其转换为JPQL,因为该bar_id列未映射到实体的属性.

由于bar_id没有直接映射到FooEntity,我如何在JPQL中实现这种查询?

java jpa jpql

9
推荐指数
1
解决办法
156
查看次数

标签 统计

css ×6

html ×6

javascript ×3

css3 ×2

java ×2

jquery ×2

ajax ×1

dojo ×1

fonts ×1

google-chrome ×1

html5 ×1

jpa ×1

jpql ×1

maven ×1

twitter-bootstrap ×1

webkit ×1